响应式布局
指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，
通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。
@media (max-width: 600px) {
.contents {
flex-direction: column;
}
}em 的计算是基于父级元素的
Chrome浏览器默认显示最小字体为12px
Chrome默认最小字号是12px(最新版英文也有此问题)，这个是Chrome为了更好显示中文设计的。
但是这样一来就会出现，设置为8px字体的元素在Chrome显示仍为12px，导致网页排版错误的问题。
.title {
font-size: 8px
}要使用小于默认最小的字体，通过缩放实现，这里是最小字体为12px,仅仅是针对字体，不可与间距的距离设置混淆，间距的距离设置没有浏览器的最小说明。
使用缩放：transform: scale(0.8);
方案一
使用rem实现响应式布局
rem单位都是相对于根元素html的font-size来决定大小的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。
因此，如果通过rem来实现响应式的布局，有两种方式：
（1）需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。
（2）使用@media媒体查询，根据不同屏幕类型，设置html中基准字体大小，那么以rem为固定单位的元素的大小也会发生响应的变化。
实现原理：
当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：
html{
font-size:62.5%; /* 10÷16=62.5% */
font-size:6.25%; /* 1÷16=6.25% ,此时 16px*6.25%=1px,html默认字体大小改成了1px*/
}
body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
font-size:12rem ; /* 12px÷1px=12(rem),也就是可以使得二者在数字上等价，只更换单位即可 */
}
需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的font-size:100%，还是设置为font-size:62.5%，如果你引入了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认 font-size。
使用方案：
html {
font-size:6.25%;
}
@media screen and (max-width: 768px) {html{font-size:3.25%;}}
@media screen and (min-width: 768px) {html{font-size:5.25%;}}
@media screen and (min-width: 992px) {html{font-size:6.25%;}}
@media screen and (min-width: 1200px) {html{font-size:7.0%;}}
/*
@media screen and (min-width: 640px) {html{font-size:6.25%;}}
应用上面的公式：
1rem = 1 * 6.25% * 16px
其中：6.25% * 16 = 0.0625 * 16 = 1
所以：1rem = 1px
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
min-width 定义输出设备中的页面最小可见区域宽度。>= 300px:生效
max-width 定义输出设备中的页面最大可见区域宽度。< 300px：生效
*/上述使用方案，存在的问题，是屏幕大小划分以及font-size比例可能不适用自己的项目。
- 媒体查询中的关键点：如何选择屏幕大小分割点？