媒体查询

近些年整个世界互联网电子发展势头迅猛，各种智能移动端设备遍地开花。进而导致程序员的世界也刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢？ ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦！其核心就是“媒体查询”技术。

一、什么是媒体查询

媒体指的就是各种设备 (移动设备, PC设备)
查询指的是要检测属于哪种设备
媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览

二、媒体查询的用法

媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。 我的理解是一套html代码在不同的设备终端下，所对应的css样式代码不同。

1、在网页的头部要添加下面一行代码，看下面的参数解释就知道这一行代码的意思了

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

width=device-width ： 网页宽度等于设备宽度

initial-scale=1.0 ： 初始缩放比例为1.0 。网页初始页面的大小占整个面积的100%

maximum-scale=1.0 ： 最大缩放比例为1.0 ，

user-scalable ： 用户是否可以手动缩放

2、样式中的单位使用百分比，em，rem等

3、代码书写

我们先来看下面这段代码，估计很多人在响应式的网站CSS中看到过类似下面的这段代码

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }
}

这个算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于960px的时候执行它下面的CSS。

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){
    body{
        background: #ccc;
    }
}

然后就是当浏览器尺寸大于960px时候的代码了：

@media screen and (min-width:960px){
    body{
        background:orange;
    }
}

我们还可以混合使用上面的用法：

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

上面的这段代码的意思是当页面宽度大于960px小于1200px的时候执行下面的CSS。

其他功能以后会持续分享

BY 逆战学习