1.Viewport
众所周知，meta中的viewport标签是移动端适配的重要手段，但是其中的写法有深入了解过嘛？是不是只是按照模板写了这么一行代码。
<meta name="viewport" content="width=device-width, initial-scale=1.0>但是从我看来，这一行代码来说是不太适应手机端的。来解读一下吧。
- 什么是 Viewport?
viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。这是官方的解答，从我个人的角度来看，最关键的一个属性就是width这个属性，这里的device-width是指机型的宽度，可以理解物理的宽度
假如：html页面的宽度固定为900px；这里device-width获取到手机端的宽度为300px（每个手机获取到的宽度都不一样，假如这里是300px），那么它代表的意思就是在300px中显示900px的内容，那么页面在该手机中初次加载完成显示的页面宽度为页面总宽度的3分之1。
那这里就好理解了，假如制作一个手机端 页面宽度为640px，那么viewport中的宽度就设置为640px，那么！就是相当于用640px显示640px的内容，不论的你用什么手机进行访问，都会首次全屏等比缩放的显示页面，我在平时的学习工作中制作手机端的页面时都是这么操作的。
这下终于理解了viewport的含义的含义。通俗易懂的讲法。
- 再来看一下viewport的其他属性吧。这里就直接列举出来，都很好理解
- width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
2.em与rem
首先，浏览器的默认字体大小为16px，就是等于1em，也等于1rem。
那em与rem的区别是什么呢，看一下rem的全写：root em
就是相当于1rem是基于root，也就是页面根元素。
而em是基于父元素继承的。
所以rem通常用于移动端的适配，具体的做法如下：
:root {
font-size: 0.625em;
}
@media (min-width: 800px) {
:root {
font-size: 0.875em;
}
}
@media (min-width: 1200px) {
:root {
font-size: 1em;
}
}通过媒体查询来动态设置根元素的font-size大小来全局控制所有字体的大小，这里的根元素字体设置为0.625em的含义是指：10px，这样当一个字体设置为1.2rem时就代表12px，以此类推，更好的计算px的值。
