媒体查询及使用

本文介绍: 媒体查询(Medi a Que ry)是CSS3新语法。媒体查询可以根据当前显示设备的特性(如：视口宽度, 屏幕比例，设备显示方向)为其添加 css 样式，使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们更方便的判断当前设备特性（视口宽度等），更方便的针对视口设置合适的样式。总之：媒体查询可以让网页适应多个终端。

1.什么是媒体 查询

媒体查询(Medi a Que ry)是CSS3新语法。

媒体查询可以根据当前显示设备的特性(如：视口宽度, 屏幕比例，设备显示方向)为其添加 css 样式，使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们更方便的判断当前设备特性（视口宽度等），更方便的针对视口设置合适的样式。总之：媒体查询可以让网页适应多个终端。

2.查询类型

将不同的终端设备划分为不同的类型，称为媒体类型

all	用于所有设备
print	用于打印机和打印预览
sc re e	用于电脑屏幕，拼版电脑，手机等

3.关键字

关键字将媒体类型或多个特性连接到一起做为媒体查询的条件

and	可以将多个媒体特性连接到一起，相当”且”于的意思
no t	排除某个媒体类型，相当于”非”的意思，可以省略
only	指定某个特定的媒体类型，可省略

4.常见 断点

<768px 超小屏幕，一般是手机	（max–width:768px）
>768px 小屏幕	（min–width:768px）
>992p x 中型屏幕，一般是平板	（min–width:992p x)
>1200p x 电脑屏幕	（min–width:1200px)

5.代码 演示

长度宽度为500px、背景颜色为红色的盒子在窗口宽度变为500px以下时，盒子也随之变为长度宽度200px、背景颜色蓝色。

  <style>
    div{
        width: 500px;
        height: 500px;
        background-color: red;
        margin: 0 auto;
    }
    @media screen and (max-width:500px){
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    }
  </style>

6.页面 适配

为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口。我们可以借助<meta>元素的viewport来帮助我们设置视口、缩放等

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

这段代码的几个参数解释：

width = device–wi d th	布局视口的宽度等于当前设备视口的宽度
init i al-scale	初始的缩放比例（默认设置为1.0）
mini mum–scale	允许用户缩放到的最小比例（默认设置为1.0）
m axi mum–scale	允许用户缩放到的最大比例（默认设置为1.0）
user–scala ble	用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）