学海无涯，不要沉浸在知识的海洋里，迷失自己。

要知道自己想要什么，抓住重点，不忘初心。

这个世界上百分之20的人，掌握着百分之80的财富。

接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。

往期知识点回顾：

重点属性-display

重点属性-position

重点属性-float

重点属性-flex

重点属性-overflow

重点属性-background

随着响应式设计模型的诞生:

Web网站发生了翻天腹地的改革浪潮，尤其随着webApp的方兴未艾，Media(媒体查询器)对布局的自适应，起到了很重要的作用。我们今天就站在webapp的角度，总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。

设置Meta标签

首先我们在使用

Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<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）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

进入CSS3 Media写法

@media screen and (max-width: 960px){ body{ background: #000; } }
复制代码

Media所有参数汇总

以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面是我总结的它的一些参数用法解释：

width:浏览器可视宽度。

height:浏览器可视高度。

device-width:设备屏幕的宽度。

device-height:设备屏幕的高度。

orientation:检测设备目前处于横向还是纵向状态。

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例。

color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

color-index:检查设备颜色索引表中的颜色，他的值不能是负数。

monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）

resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

grid：检测输出的设备是网格的还是位图设备。

实践代码，应用场景

布局自适应和rem配合使用

html 
{font-size : 20px;
}
@media only screen and (min-width: 401px)
{html {font-size: 25px !important;}}
@media only screen and (min-width: 428px)
{html {font-size: 26.75px !important;}}
@media only screen and (min-width: 481px)
{html {font-size: 30px !important;}}
@media only screen and (min-width: 569px)
{html {font-size: 35px !important;}}
@media only screen and (min-width: 641px)
{html {font-size: 40px !important;}}
复制代码

面试题：

谈谈对rem的认识，rem和em有什么区别？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。