CSS@media查询

骑猪看日落 2022-06-07 00:41 201阅读 0赞

**首先要知道，我们为什么要写自适应的页面（响应式页面）**  
众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑。这样做简直就是费力不讨好的活，所以懒惰的程序员开发了一种响应式写法，即一次开发，可以在不同分辨率的设备上正确显示！这到底是一个什么样的神器呢，接下来就揭晓它的神秘面纱。  
**1.CSS3 的 @media 查询**

**定义和使用**  
使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。  
**css语法：**

@media mediaType and|not|only (media feature) {
         /*CSS-Code;*/
    }

**媒体类型（mediaType ）**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>all</td> 
   <td align="center">用于所有设备</td> 
  </tr> 
  <tr> 
   <td>aural</td> 
   <td align="center">已废弃。用于语音和声音合成器</td> 
  </tr> 
  <tr> 
   <td>braille</td> 
   <td align="center">已废弃。 应用于盲文触摸式反馈设备</td> 
  </tr> 
  <tr> 
   <td>embossed</td> 
   <td align="center">已废弃。 用于打印的盲人印刷设备</td> 
  </tr> 
  <tr> 
   <td>handheld</td> 
   <td align="center">已废弃。 用于掌上设备或更小的装置，如PDA和小型电话</td> 
  </tr> 
  <tr> 
   <td>print</td> 
   <td align="center">用于打印机和打印预览</td> 
  </tr> 
  <tr> 
   <td>projection</td> 
   <td align="center">已废弃。 用于投影设备</td> 
  </tr> 
  <tr> 
   <td>screen</td> 
   <td align="center">用于电脑屏幕，平板电脑，智能手机等。</td> 
  </tr> 
  <tr> 
   <td>speech</td> 
   <td align="center">应用于屏幕阅读器等发声设备</td> 
  </tr> 
  <tr> 
   <td>tty</td> 
   <td align="center">已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备</td> 
  </tr> 
  <tr> 
   <td>tv</td> 
   <td align="center">已废弃。 用于电视和网络电视</td> 
  </tr> 
 </tbody> 
</table>

当然以上的媒体类型大多用不到，用到最多的是all和screen两个；  
**媒体功能**  
媒体功能也有很多，以下列出常用的两个

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>max-width</td> 
   <td align="center">定义输出设备中的页面最大可见区域宽度</td> 
  </tr> 
  <tr> 
   <td>min-width</td> 
   <td align="center">定义输出设备中的页面最小可见区域宽度</td> 
  </tr> 
 </tbody> 
</table>

2.开始我们的响应式之旅。  
准备工作1：设置Meta标签  
首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

这段代码的几个参数解释：  
width = device-width：宽度等于当前设备的宽度  
initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）  
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）  
准备工作2：加载兼容文件JS  
因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

准备工作3：设置IE渲染方式默认为最高(可选)  
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的

**开始敲代码**  
当屏幕分辨率小于1280px时

@media screen and (max-width: 1280px) {
        body { background-color:red; }
    }

当屏幕分辨率大于1280px时

@media screen and (min-width: 1280px) {
        body { background-color:black; }
    }

将以上代码加入css文件中，可以得到如下效果：  
当分辨率大于1280px时：  
![这里写图片描述][SouthEast]  
当分辨率小于1280px时  
![这里写图片描述][SouthEast 1]

结语：好啦！简单的css@media查询的只是就这么多，关于响应式的很多内容还要多了解了解。

[SouthEast]: /images/20220607/17c65a72055e4d2785687fc9f50ab827.png
[SouthEast 1]: /images/20220607/13608a8e0e234d3a94f2374e494a3915.png