每日思考（2019/12/17）

Posted 2021-03-22 ericzlin

题目概览

• 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
  })