一、meta viewport
在 html 文件的 head 里面添加以下代码
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
可以使页面大小和设备一样大，且用户无法进行缩放。
其中 content 属性值：
- width: 可视区域的宽度，值可为数字或关键词 device-width 表示和设备一样宽
- user-scalable: 是否可对页面进行缩放，no 表示禁止缩放
- intial-scale: 页面初始的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
- maximum-scale: 页面最大可缩放比例
- minimum-scale: 页面最小可缩放比例
二、media query（响应式）
语法一：
<style>
@media (条件) and (条件) {
样式
}
</style>
满足小括号里的条件时，就执行花括号里的样式。
语法二：
<link rel="stylesheet" href="style.css" media="(条件)">
满足条件时，style.css 会生效。要注意，无论条件是否满足，style.css 始终都会下载。
三、动态 REM
1 rem 等于页面根元素 html 的 font-size值。
在 head 中写上以下代码
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth + 'px;}</style>')
</script>
这样，1 rem === html 的 font-size === pageWidth，需要动态适配的元素都可以用 rem 作单位。
