首页 > > 网页制作 > css >

CSS3 media媒体查询器的使用方法

2018-06-24 01:48:57来源：未知阅读 ()

最近几年随着响应式布局的发展，一次开发多次使用，自适应屏幕的响应式网站的需求越来越多。但是怎样使得网站能自适应屏幕呢？这里就需要提到一个css3里面新增的技术了-media媒体查询器。

那么什么是media媒体查询器呢？

Media媒体查询器是CSS3新增的一个可以检测打开网站的终端的屏幕分辨率的技术。

Media媒体查询器的使用方法大致如下：

1.设置一个meta标签如：

　　　　 1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

相关参数解释：

　　device-width:定义输出设备的屏幕可见宽度。　　

　　device-height:定义输出设备的屏幕可见高度。

　　width = device-width：宽度等于当前设备的宽度。

　　initial-scale：初始的缩放比例（默认设置为1.0）。

　　minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）。

　　maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）。

　　user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）。

2.加载兼容文件js

为什么加载兼容文件js呢？

因为IE8以上的内核是不兼容html5以及CSS3 media的。所以需要加载两个兼容文件使得我们的代码能够实现出来。

1 <!--[if lt IE 9]>
2 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
3      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
4 <![endif]-->

也可以自行下载html5hiv.js和respond,js只需要在使用的时候修改对应的script里面的src路径就ok。

3.把IE的渲染方式调节到最高。闲在大多数的IE都是9以上的版本，这个版本的IE文档模式不是最新的，或者说很多的小伙伴没有注意这一点，所以可以通过下面的代码实现保持IE的文档模式保持最新的版本：

1 <meta http-equiv="X-UA-Compatible" content="IE=edge">

第二种方法：

1 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

安装一个Google chrome frame这个Google chrome插件。这样可以使得所有的浏览器都能够使用Webkit引擎及V8引擎进行排版及运算，如果没有安装这个插件的话上面的代码是会使得浏览器一最高的文档模式展现效果。

CSS3 media的标准写法：

例如：当页面小于960px的时候执行它下面的CSS代码。

1 @media screen and (max-width: 960px){
3     body{
5         background: #000;
7      }
9 }

这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体。

CSS2 Media用法

其实并不是只有CSS3才支持Media的用法，早在CSS2开始就已经支持Media，具体用法，就是在HTML页面的head标签中插入如下的一段代码：

1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">

想知道现在的移动设备是不是纵向放置的显示屏，可以这样写：

1 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

1 <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

但是这个方法会增加http的访问次数。所以用CSS3把所有的CSS写到一起才是最ok的。

Ok，现在我们回到CSS3的media用法上面，前面讲了用CSS3的写屏幕宽度小于960px的尺寸的写法，现在我们来写一下等于960px的方法：

1 @media screen and （max-width-device：960px）{
2 
3 Body{
4 
5        Background：blue；
6 
7 }
8 
9 }

宽度大于960px的写法：

1 @media screen and(min-width:960px){
2 
3        Body{
4 
5               Background:red;
6 
7 }
8 
9 }

前面就是常用的几种写法了，接下来对CSS3 media做一个总结：

width:浏览器可视宽度。

height:浏览器可视高度。

device-width:设备屏幕的宽度。

device-height:设备屏幕的高度。

orientation:检测设备目前处于横向还是纵向状态。

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例。

color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

color-index:检查设备颜色索引表中的颜色，他的值不能是负数。

monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）

resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

grid：检测输出的设备是网格的还是位图设备。

最后，附上一个趣味Demo结尾：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>CSS3 media Test</title>
 6 <meta name="author" content="LostWeapon" />
 7 <style>
 8 *{
 9     text-align: center;
10     font-size: 20px; 
11 }
12 div{
13     font-size: 14px;
14 }
15 @media screen and (min-resolution: 75.5dpcm) {
16     .normal{display:none;}
17 }
18 @media screen and (min-resolution: 28.3dpcm) and (max-resolution: 75.4dpcm) {
19     .retina{display:none;}
20 }
21 </style>
22 </head>
23 <body>
24 <p class="retina">视网膜屏</br>哎呦 不错哦，小伙子有前途！</p>
25 <p class="normal">普通屏</br>还不快去努力学习挣钱换电脑!</br><strong>看什么看，说的就是你！</strong></p>
26 </body>
27 <footer>
28     <div>
29        Copyright &copy;2017 墨雨溪风
30     </div>
31 </footer>
32 </html>