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;
     }
}

二、手机自适应

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

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表示是否允许用户进行缩放。

强制性兼容语句：

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

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

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

只在IE下生效：<!--[if IE]>在IE浏览器显示<![endif]-->

只在IE6下生效：<!--[if IE 6]>在IE6浏览器显示<![endif]-->

只在IE6以上版本生效：<!--[if gte IE 6]>在IE6以上(包括)版本IE浏览器显示<![endif]-->

只在IE6上不生效：<!--[if ! IE 6]>在非IE6浏览器显示<![endif]-->

非IE浏览器生效：<!--[if !IE]>在非IE浏览器显示<![endif]-->

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

<style>
   *{
       width: 100px;
       +width:100px;
       *width:100px;
       _width:100px;
       border-radius: 10px;
       -ms-border-radius: 10px;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
     }
</style>

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