6. 火狐浏览器下各个值

PC端分辨率一样的情况下，屏幕尺寸越大，显示的越模糊(因为dpi越小)。 我们可以调整网页在移动端上的缩放比例，这个值就是viewport。默认情况下，移动端浏览器会将 viewport 宽度设为980px（也有可能是1024px 或其它值），也就是说1px = 设备屏幕宽度的…

1. 视口 viewport viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏…

设备像素/物理像素：由设备的屏幕决定，其实就是屏幕中控制显示的最小单位。 设备独立像素/设备逻辑像素：是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素。 DPR（设备像素比）：设备像素比 = 设备像素 / 设备独立像素，如果设备像素大于设备独立像素（DPR大于1的…

这篇文章会介绍CSS中大部分布局方式以及技巧，包括但不限于浮动、定位、flex、grid。 先来看最常用的一种，利用margin属性设置外边距，当要居中当元素是display:block时可以用这种方法。 使用text-align,将元素当成文字直接居中。当要居中元素是inli…

圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思…

有很长一段时间没有开发动画相关的代码了，最近看React源码，又看到了requestAnimationFrame这个API，突然忘记这个API的用法。看来还是得及时总结，做下笔记才能帮助后续理解。

浏览器重绘频率一般会和显示器的刷新率保持同步。比如显示器屏幕刷新率为 60Hz，使用requestAnimationFrame API，那么回调函数就每1000ms / 60 ≈ 16.7ms执行一次。 requestAnimationFrame 会把每一帧中的所有 DOM 操…

在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout或者setInterval 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 …