题目概览
- 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 })
原文地址:https://www.cnblogs.com/EricZLin/p/12057090.html
时间: 2024-10-29 18:49:42