CSS3媒体查询和手机自适应

一、媒体查询

在CSS3中写入媒体查询时，要注意将主样式写在前面，媒体查询写在后面。

媒体查询的编写主要有两种方法，一种是从小到大，一种是从大到小。大小同时使用编写代码时也要按照这两种方法排序。

在@media之后可写all、screen或者省略，all表示所有，screen表示所有的屏幕。

设置主样式为：

.block{
      height: 2000px;
      border: 1px solid red;
      margin: 0 auto;
}

从大到小写法的代码如下：

@media all and (max-width: 1500px) {
      .block{
          width: 1190px;
          background-color: red;
      }
}

@media all and (max-width: 1024px) {
      .block{
          width: 768px;
          background-color: blue;
      }
}

@media all and (max-width: 768px) {
       .block{
           width: 680px;
           background-color: yellow;
       }
}

从小到大的代码写法如下：

@media all and (min-width: 768px) {
     .block{
         width: 680px;
         background-color: yellow;
     }
}
@media all and (min-width: 1024px) {
     .block{
         width: 768px;
         background-color: blue;
     }
}
@media all and (min-width: 1500px) {
     .block{
         width: 1190px;
         background-color: red;
     }
}

大小同时使用的代码如下：

@media all and (min-width: 768px) and (max-width: 1024px) {
     .block{
        width: 680px;
        background-color: yellow;
     }
}
@media all and (min-width: 1024px) and (max-width: 1500px) {
      .block{
         width: 1024px;
         background-color: blue;
     }
}
@media all and (min-width: 1500px) {
      .block{
          width: 1190px;
          background-color: red;
     }
}

二、手机自适应

标签内与手机自适应相关的属性有

name="viewport",表示视口；

content="width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=yes"其中width=device-width表示宽度为屏宽，initial-scale=1.0表示1:1放置，maximum-scale=3.0表示最大比例为3.0，minimum-scale=1.0表示最小比例为1.0，user-scalable=yes表示是否允许用户进行缩放。

强制性兼容语句：

其中要了解到的就是CSS hack，CSS hack不是CSS3里面的样式。CSS hack的目的就是使CSS代码兼容不同的浏览器。

目前我们学习到的是CSS hack的条件注释法：

只在IE下生效：

只在IE6下生效：

只在IE6以上版本生效：

只在IE6上不生效：

非IE浏览器生效：

手机自适应中的兼容语句示例：

-ms-表示IE浏览器，-moz-表示火狐浏览器，-webkit-表示谷歌浏览器。