当前位置: 首页 > news >正文

前端每日知识3+1_第10天

  • 第10天 (2019-04-26)
    • [html] viewport常见设置都有哪些?
    • [css] 对比下px、em、rem有什么不同?
    • [js] 简要描述下什么是回调函数并写一个例子出来

HTML:

在移动端做开发时,必须要搞清楚 viewport 这一设置。

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

为了让移动端可以很好地显示页面,因此需要对 viewport 进行设置。相关的设置值如下:

设置	解释
width	设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale	设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale	允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale	允许用户的最大缩放值,为一个数字,可以带小数
height	设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable	是否允许用户进行缩放,值为"no""yes", no 代表不允许,yes 代表允许
viewport 是在 meta 标签内进行控制。

// 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"
/>
相关的衍生知识: dpr 与 CSS 像素。CSS 像素的 1px 在 PC 端上与设备的物理像素基本一致,而到手机端就会有两个物理像素对应一个 CSS 像素的情况出现(如 iPhone 的视网膜屏)。
所以 iPhone 上的 dpr = 22 个物理像素 / 一个 CSS 像素(独立像素)

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

CSS:

px、em、rem都是计量单位,都能表示尺寸,但是有有所不同,而且其各有各的优缺点。

Px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素(此像素与设备的物理像素有一定的区别,后续详细说明见文末说明1),利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。

em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font-size的参考对象为父元素文本font-size)。使用em可以较好的相应设备屏幕尺寸的变化,但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size,如有遗漏可能会导致错误。

rem也表示相对尺寸,其参考对象为根元素的font-size,因此只需要确定这一个font-size。
所以推荐使用px 或rem, em 容易出错
JS:

回调是把一个函数作为参数传递给另一个函数,当该函数满足某个条件时触发该参数函数。
主要用于异步操作 例如网络请求 防止页面同步代码阻塞导致渲染线程停止

function longTask(callback,timeout) {
  setTimeout(callback,timeout)
}
longTask(()=>{console.log("回调任务被执行了");},2000);
console.log("我是同步代码 不会阻塞我");

相关文章:

  • 【JAVA程序设计】基于Springboot+Thymeleaf的在线订餐系统
  • yolo-目标检测算法简介
  • OpenHD改造实现廉价高清数字图传(树莓派zero + ubuntu PC )——(四)OSD数据传输和画面显示
  • 融合互利共生和透镜成像学习的哈里斯鹰优化算法-附代码
  • 【ASM】字节码操作 Opcodes 介绍
  • Unity技术手册-初识编辑器(下)
  • Hystrix熔断降级
  • 基于JAVA舞蹈网站计算机毕业设计源码+数据库+lw文档+系统+部署
  • 一文读懂TDengine的三种查询功能
  • 在栈空间和堆空间中数据是如何存储的
  • ZYNQ之路--制作AXI4 接口IP的思路
  • 深入浅出索引(上)
  • 创建基于 fbx sdk 的 c++ 项目
  • ICPC-2022网络赛第二场
  • YOLOV5通道剪枝【附代码】
  • RepVGG论文详解
  • Macbook Typora+Picgo命令行+github 图床配置
  • knife4j介绍及使用
  • 【luogu CF1609G】A Stroll Around the Matrix(贪心)(线段树)
  • 【在域中创建多台控制器】
  • 2022全国车辆工程专业大学排名一览表
  • 2022周口职业技术学院单招学费多少钱一年-各专业收费标准
  • 2022年中原工学院艺术类招生简章
  • 2022浙江经贸职业技术学院学费多少钱一年-各专业收费标准
  • 2022年湖南大学强基计划报名条件-报名时间-报名入口
  • 2020河北工程大学运动训练专业招生简章
  • 2022湖州有哪些民办大学?湖州所有民办大学名单一览表(1所)
  • 2022天津城市建设管理职业技术学院学费多少钱一年-各专业收费标准
  • 2022滁州学院艺术类学费多少钱一年-各专业收费标准
  • 2022云南警官学院学费多少钱一年-各专业收费标准