【前端攻略--HTML/CSS】媒体查询

媒体查询：根据屏幕大小，然后显示相对应的样式

/*媒体查询*/
      /*最小的宽度是1200px,那么就是大于1200px*/
      @media only screen and (min-width:1200px ) {
        .main{
          background: springgreen;
        }
      }
      /*最大的宽度是1200px，小于1200px都适用于这里*/
      @media only screen and (max-width:1200px ) {
        .main{
          width: 100%;
        }
      }
      /*
       大于min-width的宽度，小于max-width宽度
       * */
      @media only screen and (min-width: 960px) and (max-width: 1200px) {
        .main{
          width: 100%;
        }
      }

1）媒体查询 @media 是个好东西，至少对像我一样刚入行的小前端做响应式是个不错的选择。

①我们来看看媒体查询页面最大宽度的标准写法

@media screen and (max-width: 960px){
   　    body{
        　　　background: #000000;
　　　　　　　font-size:14px;
　　　　　　　...
    }
}

解读下代码意思：当页面宽度小于960px时，使用以下对应样式表.

备注：screen 意思是告知设备在打印页面时使用无衬线体，屏幕上显示也用无衬线字体，现在你会去打印一张网页吗？不会吧！所以目前网站都不会考虑用户去打印网站页面，so...screen可以不用写，直接省去.

②这是媒体查询页面最小宽度的标准写法

@media screen and (min-width:960px){
    　　body{
       　　　background:#000000;
　　　　　　　font-size:14px;
　　　　　　　...
    }
}

代码意思：当页面宽度大于960px时，使用以下对应样式表.

③当然我们也可以媒体查询一个页面区间宽度，

@media screen and (min-width:960px) and (max-width:1200px){
　　　body{
       　　　background:#000000;
　　　　　　　font-size:14px;
　　　　　　　...
    　　}
}

上面代码大概意思是：当页面宽度大于960px，小于1200px时([960px,1200px])，使用以下样式表.

④ 媒体查询的其他参数

以上是我们在开发过程中常用到的三种媒体查询特性小于、大于、等于，除此之外她还有其他特性，下面是我查找总结媒体查询的其他参数和用法.

width/height：浏览器可视宽度(也叫视口)/浏览器可见高度.
device-width/device-height：设备屏幕宽度/设备屏幕高度.
color:检测颜色的位数。（例如：min-color:32 就是检测设备是否拥有32位颜色 #000000）
color-index:检查设备索引颜色表中的颜色(颜色值不能小于0)。
orientation：判断当前设备是横屏还是竖屏.
aspect-ratio:检测浏览器可视宽度和高度的比例。(现在宽高比为16:9是最佳的，比如我做的直播窗口，要求宽高比就是16:9)
device-aspect-ratio:检测设备的宽度和高度的比例。
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是网格设备的还是位图设备。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个很少用得到）

2）媒体查询的"局限性"

我要说的这个局限性，指的是它不能用在IE8以下，IE8以下就不说了，它目前应该被前端骂的是身残志坚了，IE8以下了既不支持HTML5，也不支持CSS3的媒体查询，这个怎么搞...IE8以下放弃算求，但是有些公司，用户又不多啊，非得要求你小前端要响应式IE8以下，还好可以在项目中导入Respond.js，这样使用CSS3的媒体查询就有作用了，对于这个Respond.js，小生没实打实的用过，在这里闲扯了下，分享一篇知乎上关于这个Respond.js用法的文章给大家：https://www.zhihu.com/question/21634225

3）实现响应式网页，不止CSS3的媒体查询能做

1. Bootstrap：

对于这些框架，我感觉都怕用，因为它里面所有标签的样式都有，你引用就好了，是节省了开发时间。对于我来说，有点难把握，做完移动端网站我就有点后悔用了它，要说，不管什么，会写源生的才是最Nice的.

2. JS监听视口宽度变化从而动态更换CSS样式表，达到最佳的响应式：

这种方式，应该是很多攻城狮都喜欢用的，因为它精确，对于代码冗余，后期维护这些都比较友好，你要知道，攻城狮一般都很强调用户体验的.

- End -

| 参考文章 |

1.https://www.cnblogs.com/webonline/p/webonline.html