每日思考(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
    })

原文地址:https://www.cnblogs.com/EricZLin/p/12057090.html

时间: 2024-10-29 18:49:42

每日思考(2019/12/17)的相关文章

2019.12.17 面向对象习题

/** * TimeTraveler.java * com.DuiXiang * * Function: TODO * * ver date author * ────────────────────────────────── * 2019年12月17日 17671 * * Copyright (c) 2019, TNT All Rights Reserved.*/ package com.DuiXiang; /** * ClassName:TimeTraveler Function: TOD

解题报告 smoj 2019初二创新班(2019.3.17)

目录 解题报告 smoj 2019初二创新班(2019.3.17) T1:找玩具 题目描述 题意转化 分析 代码 优化(代码复杂度) T2:闯关游戏 题目描述 分析 代码 T3:子数组有主元素 题目描述 分析 代码(\(O(nm\log n)\)) 优化 代码(\(O(nm)\)) 解题报告 smoj 2019初二创新班(2019.3.17) 时间:2019.3.21 T1:找玩具 题目描述 在游戏开始之前,游戏大师在房间的某些地方隐藏了N个玩具.玩具编号为1到N.您的任务是尽可能多地找到这些玩

12.17 Nginx负载均衡;12.18 ssl原理;12.19 生产ssl密钥对;12.20 Nginx配置ssl

扩展: 针对请求的uri来代理 http://ask.apelearn.com/question/1049 根据访问的目录来区分后端web http://ask.apelearn.com/question/920 12.17 Nginx负载均衡 1. 安装dig命令: [[email protected] ~]# yum install -y bind-utils 2. 用dig获取qq.com的ip地址: [[email protected] ~]# dig qq.com 3. 创建ld.co

centos 6.5 升级内核 linux 3.12.17

环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:Linux centos 2.6.32-431.el6.x86_64(Centos-6.5-x86_64-minimal.iso ) 升级内核版本:longterm:3.12.17 升级步骤: 1.虚拟系统安装 要求mininal方式安装(205个包),具体步骤省略. 2.查看原有系统内核版本,升级更新包 2.1更新包 [[email protected] ~]# yum update [[email pr

12.17 Nginx负载均衡;12.18 ssl原理;12.19 生产ssl密钥对;12.20 N

12.17 Nginx负载均衡:12.18 ssl原理:12.19 生产ssl密钥对:12.20 Nginx配置ssl 扩展: 针对请求的uri来代理 : http://ask.apelearn.com/question/1049 根据访问的目录来区分后端的web : http://ask.apelearn.com/question/920 nginx长连接 : http://www.apelearn.com/bbs/thread-6545-1-1.html nginx算法分析 : http:/

12.17 Nginx负载均衡 12.18 ssl原理 12.19 生成ssl密钥对 12.20 N

12.17 Nginx负载均衡 [[email protected] ~]# yum install -y bind-utils[[email protected] ~]# dig www.qq.comANSWER SECTION:www.qq.com. 73 IN A 59.37.96.63www.qq.com. 73 IN A 14.17.42.40www.qq.com. 73 IN A 14.17.32.211[[email protected] ~]# curl -x127.0.0.1:

12.17 ~ 12.23周训练计划+总结

12.17 学一波min25筛 大概会了 裸题: https://www.luogu.org/problemnew/show/SP34096 12.18 上午考试,下午+晚上改题 orz https://www.codechef.com/problems/BTREE 12.19 上午怒刚http://uoj.ac/problem/59和http://uoj.ac/problem/56 没有刚完,大概周末继续 下午睡到2:30,起来听了一波fwt,觉得挺傻逼的 https://lydsy.com/

2019.12.5-特征布局,新闻列表 代码

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>特征布局</title></head><style type="text/css"> .news_list_com{ width: 600px; height: 290px; border:1px solid #ddd

2019.12.09-新闻列表布局代码

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>特征布局</title></head><style type="text/css"> .news_list_com{ width: 600px; height: 290px; border:1px solid #ddd