每日思考（2019/12/17）

题目概览

viewport常见设置都有哪些？
对比下px、em、rem有什么不同？
简要描述下什么是回调函数

题目解答

viewport常见设置都有哪些？

概念：viewport 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 viewport 会超出设备的显示区域（即会有横向滚动条出现）。设备默认的 viewport 在 980 - 1024 之间

属性设置

<!-- width=device-width, initial-scale=1.0 是为了兼容不同浏览器 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

属性名	取值	描述
width	正整数 \| device-width	定义视口的宽度，单位为像素
height	正整数 \| device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes \| no	定义是否允许用户手动缩放页面，默认值yes

参考文章：移动前端开发之 viewport 的深入理解

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

px 像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em 是相对长度单位，相对于当前对象内文本的字体尺寸，指相对于父元素的大小。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位。
rem 是CSS3新增的一个相对单位（root em，根em），但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
```
p {font-size:14px; font-size:.875rem;}
```

简要描述下什么是回调函数

回调函数就是指函数在初始定义的时候先不执行，等满足一定条件以后再拿出来执行

(callback) => {
    return (...args) => {
        const self = this;
        setTimeout(() => {
            callback.apply(self, args);
        }, 200);
    };
};

回调是把一个函数作为参数传递给另一个函数，当该函数满足某个条件时触发该参数函数。主要用于异步操作例如网络请求防止页面同步代码阻塞导致渲染线程停止
```
function longTask(callback,timeout) {
  setTimeout(callback,timeout)
}
longTask(()=>{console.log("回调任务被执行了");},2000);
console.log("我是同步代码 不会阻塞我");
```

回调函数首先作为一个函数的参数传入，当这个函数执行后再执行的函数，往往会依赖前一个函数执行的结果在 javascript 中，对于 I/O、HTTP 请求等异步操作，为了控制执行的顺序就需要使用回调的方法

// 第三个参数就是回调函数
function func1(param1, param2, ..., callback){
  // To do some action
  // 往往会在最后调用 callback 并且传入操作过的参数
  callback(cbParam1, cbParam2, ...)
}

// 实际调用的时候
func1(param1, param2, ..., (cbParam1, cbParam2, ...) => {
  // To do some action
})