媒体查询（@media）

Posted on | In | 个浏览

媒体查询是可以更精确的作用于不同媒介类型，是实现响应式布局/自适应的一种很好的方法。随着移动端的普及变得越来越重要。

语法
1
2
3
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
在使用媒体查询之前，需要设置好<meta>标签：
1
<meta name="viewport" content="width=device-width, initial-scale=1,minmum-scale=1,maxmum-scale=1,user-scalable=no">
Viewport 属性名 备注
width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
- -
target-densitydpi(安卓特有) 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
@media常用方式

  1. 用min-width时，小的放上面大的在下面：

    1
    2
    3
    4
    5
    @media (min-width: 768px){ //>=768的设备 }

    @media (min-width: 992px){ //>=992的设备 }

    @media (min-width: 1200){ //>=1200的设备 }

  2. 用max-width那么就是大的在上面，小的在下面：

    1
    2
    3
    4
    5
    @media (max-width: 1199){ //<=1199的设备 }

    @media (max-width: 991px){ //<=991的设备 }

    @media (max-width: 767px){ //<=768的设备 }

  3. 混合应用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @media media screen and (min-width:1200px) {}

    @media media screen and (min-width: 960px) and (max-width: 1199px) {...}

    @media screen and (min-width: 768px) and (max-width: 959px) {...}

    @media only screen and (min-width: 480px) and (max-width: 767px) {...}

    @media only screen and (max-width: 479px) {...}
@media常用媒体尺寸

@media常用媒体尺寸

方案推荐(移动端+PC)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

参考文章

响应式设计媒体查询尺寸分界点一览表
@media响应式媒介尺寸
@media 最全机型