CSS3 Media Queries 多媒体查询实现响应式设计

  现在移动端的用户和流量远远高于pc端的，做网站只做pc端已经需求不大，做两个版本又耗费资源，虽然单独做的用户体验会更好，可是也要分情况，比如服务多功能类，比较复杂的网站分开做两个版本会好很多，不过资源有限的时候，响应式网站就对于维护和开发显得很有必要。

响应式是根据设备的多媒体查询语法，由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false，宽度自动适应，分配，排版和缩放，因此可以兼容多个终端。

 

首先来区分一下属性media的值概念：

max-device-width：设备可视宽度，PC浏览器随意缩放时不会执行css，因为设备宽度没变化，如果是使用手机横竖屏，也不会执行css，因为手机的宽度没变化。

max-width：显示区域的宽度，比如浏览器的宽度，手机浏览器的宽度，所以宽度改变时会执行css。

 

在头部用link引入：

在头部link引入时，可以在link中加入media属性在限制，当满足media条件时才会映入该css文件，如下：

当屏幕的宽度大于等于400px的时候。

 

宽度也可以是一个范围：大于600小于800时

 

 

也可以是直接引入css文件，而响应式代码块可嵌套在css文件中，@media之间可以相互嵌套。

@media screen and (max-device-width: 640px) {
 
@media screen and (max-device-width: 320px) { } 
@media screen and (max-device-width: 360px) { } 

} 

@media screen and (min-device-width: 641px) and (max-device-width: 1000px) { }

 

 

自适应代码min-width和max-width使用要领：

在不确定使用min-width或者是max-width的时候，可以假设宽度是个屏幕宽度为X，要满足min-width

@media (min-width: 768px){ //>=768的设备 } @media (min-width: 992px){ //>=992的设备 } @media (min-width: 1200){ //>=1200的设备 }

 

只使用max时，查询宽度从大到小；max-width>x>min-width

@media (max-width: 1199){ //<=1199的设备 } 
@media (max-width: 991px){ //<=991的设备 } 
@media (max-width: 767px){ //<=768的设备 }

 

高级的混合应用

min-width和min-width也可以混合使用，查询宽度从大到小逐一排查，如下css，当屏幕宽度x的最小宽度是1200px时，最大宽度就不可能小于479px，所以实现{ }代码块；如果反过来，当最大屏幕宽度是1200px时，原则上是实现对应的代码快，可是不管是最小宽度还是最大宽度479px都比1200px小，所以会产生冲突。

@media screen and (min-width:1200px){} //@media screen and (max-width:1200px){} 反过来不成立 @media screen and (min-width: 960px) and (max-width: 1199px) { } 
@media screen and (min-width: 768px) and (max-width: 959px) { }
@media only screen and (min-width: 480px) and (max-width: 767px){ } 
@media only screen and (max-width: 479px) { }

 

 

宽高比

CSS3 Media Queries 多媒体查询中可以设定设备的宽高比，来实响应对应的代码，用aspect-ratio定义'width'与'height'的比率，符合条件则实现{ }的css样式。

支持min，max前缀，因此派生出min-aspect-ratio和max-aspect-ratio两个媒体特征，表示最小最大的的宽高比。

@media ( aspect-ratio: 3/2 ){ body{ background: #0381bb; } } //支持min和max 
@media (min-aspect-ratio: 3/2 ){ body{ background: #0381bb; } }

 

以上是设备宽高比，那么显示器宽高比呢，因此可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性，如常见的显示器比率有4/3, 16/9, 16/10

@media( device-aspect-ratio: 2/3 ){   body{     background: #0381bb;   } }

 

设备的使用方向:定义'height'是否大于或等于'width'。如果 高>=宽 ，则orientation: landscape ，portrait代表是，landscape代表否

 

@media( orientation: landscape ){ body{ background: #27ae60; } } 
@media (orientation: portrait ){ body{ background: #f2cb2b; } }

 

 

除了可以计算设备的宽度之外，当然也是可以计算比较高度，虽然这种情况比较少。

@media ( max-device-height: 480px ){ body{ background: #f3581a; } } 
@media ( max-device-width: 767px ){   body{     background: #c36cea;   } }

 

 

逗号分割条件

如果想用多个限制条件，可以用逗号分隔连接多个媒体查询：

@media screen and ( orientation: landscape ), screen and ( min-width: 700px ){ body{ background: #c0392b; } }

 

on，only

当时用操作符not时，一定要明确地指定媒体的类型，意思是除了规定条件之外，其他的都执行{ }代码块，排除掉某些特定的设备。

 

类似的还有only，用来定某种特别的媒体类型。

@media not screen and ( max-width:959px){ body{ background: #ccc; } }//除了宽度比959px小的之外，宽度比959px的时候都显示背景灰色。

 

以上是CSS3 Media Queries 多媒体查询实现响应式设计的一些技巧和应用，多媒体查询经常用到，注意到以上提到的细节就不会凌乱或者出错啦。