每日前端签到（第八天）

第八天 2018-08-13

html:viewport常见设置都有哪些？

css:对比下px、em、rem有什么不同？

js:简要描述下什么是回调函数并写一个例子出来

第一题：

viewport在移动端是适配当中扮演了比较重要的角色。

在一般的情况下手机端会把viewport设置为980px或者1048px或者其他 ，这个叫layout viewport。

然后手机的宽度却没有这么宽所以，内容可能部分可见，或者整个样式乱掉。

手机的实际屏幕可见宽度可以用document.body.clientWidth来获得，一般就是上面提到的980px，

然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport（度量viewport/视口viewport）。

viewport 几个重要的概念

width 设置layout viewport 的宽度，为一个正整数，或字符串”width-device” 他设置的layout viewport
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 而它设置 visual viewport
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用。

user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

initial-scale缩放的实际上是visual viewport的值，而width设置的layout viewport的值，两者如果同时设置，layout viewport会取visual viewport和width的最大值，而单独设置一个，就取那个值，layout viewport的值和visual viewport有一定的关系，所以通过单独设置initial-scale是可以将layout viewport的值设置成ideal viewport

第二题

物理像素：设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。

逻辑像素：也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数（px）。

设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。

em是相对父节点字体大小的单位，默认父节点字体大小10px

rem是相对根节点大小的单位,默认根节点字体大小16px

第三题

定义时候不执行，等待条件后执行。

setTimeout(()=>{console.log('我是回调')},1000)