Css3 Media Queries详解

随着移动端的兴起,我们需要适配多种移动端设备,这时候我们就需要用到Media Queries

---

1.Media Queries是什么呢？

Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码：

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中允许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。

---

2.什么情况下用到Media Queries？

根据不同的屏幕,分别引用不同的样式,如下:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media语句表示的是：当页面宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。

首先来看media的语句中包含的内容：

1、screen：这个不用说大家都知道，指的是一种媒体类型；
2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；
3、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。

上述的代码换成css的写法如下:

@media screen and (max-width: 600px) { 选择器 { 属性：属性值； } }

常用的Media Query如下表所示：

兼容的浏览器：

---

3.Media Queries的具体使用方式

一、最大宽度Max Width

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

<link rel="stylesheet" media="screen and (min-width:600px)" href="large.css" type="text/css" />

上面表示的是：当屏幕大于或等于600px时，将采用large.css样式来渲染Web页面。

三、多个Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

上面的表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

---

4.提供一组目前自己用的适配移动端屏幕的Media Queries

---

根据不同的手机屏幕,设置基于html元素的字体大小,利用rem的方式实现移动端屏幕的适配

(注:这套适配方案是按照640的屏幕,获得的实际大小除以40,如获得的字体大小为40px,那么转换为rem就是1rem)

@media only screen and (max-width: 321px) {
    html {
        font-size: 20px;
    }
}


@media only screen and (min-width: 321px) and (max-width: 360px) {
    html {
        font-size: 22.5px;
    }
}

@media only screen and (min-width: 361px) and (max-width: 375px) {
    html {
        font-size: 23.4px;
    }
}

@media only screen and (min-width: 376px) and (max-width: 414px) {
    html {
        font-size: 25.8px;
    }
}

@media only screen and (min-width: 415px) and (max-width: 479px) {
    html {
        font-size: 27px;
    }
}

@media only screen and (min-width: 480px) {
    html {
        font-size: 30px;
    }
}

@media only screen and (min-width: 768px) {
    html {
        font-size: 32px;
    }
}

---

总结:
1.Media Queries可以去做响应式网站,根据屏幕大小分为手机端,Ipad,电脑端
2.Media Queries可以根据屏幕大小,基于rem去做移动端的适配