【每日十分钟前端】基础篇12，meta viewport、line-height:2；与line-height:200%；、前端使用异步的场景

1、[HTML]meta viewport 是做什么用的，怎么写？
2、[CSS]line-height: 2; 和 line-height: 200%; 有什么区别?
3、[JS]前端使用异步的场景。

---

1、meta viewport 是做什么用的，怎么写？

meta标签：

可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词，位于head元素内部。

viewport：

移动设备屏幕上显示网页的那一块区域，就是浏览器显示网页的区域。但viewport不局限于浏览器可视区域的大小。

meta标签viewport的属性：

属性	作用
width	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

meta viewport 是用于适配移动设备的，为了使不管是什么宽度的页面都能在移动设备端得到完美适配（不需要用户缩放和滚动横向滚动条并且字体图片等显示正常）。

也可以解决1px边框变粗问题（点击传送）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

2、line-height: 2; 和 line-height: 200%; 有什么区别?

line-height: 2：
根据子元素的字体大小计算行高然后让子元素继承；
line-height: 200%：
根据父元素的字体大小计算行高然后让子元素继承；

给具体的某一元素设置的时候没有区别，区别在于子元素继承上。

3、前端使用异步的场景

需要等待，但是又不能阻塞程序的时候需要使用异步
异步的设计主要是JavaScript是一个单线程的语言，单线程只允许同时做一件事，如果同时需要做多个，那其他的需要去旁边排队去。
1、网络请求，如img的动态加载、ajax请求；
2、定时任务，如setTimeout、setInverval；
3、事件绑定、DOM事件；
4、ES6中的Promise；