在做移动端适配的时候，很多人第一反应就是使用 rem ，通过动态设置 html 上的 font-size 来进行页面的自适应，基本原理就是 rem 表示的是 root em ，页面中所有的值都是基于

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport。 而视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器…

随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。 在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公…

学习CSS是构建好看网页的一种方式。 但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。 毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。 因此，在这篇文章中，向你介绍7个 比较少见且好用的 CSS 属性，希望对你有所帮助。 1. …

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图： 图中的内层是content依次是padding border margin。通常我们设置背景时就是内容…

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。 高…

深色模式（Dark Mode）在iOS13 引入该特性后各大应用和网站都开始支持了深色模式。在这之前，深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度，使得使用人员长时间盯着屏幕眼睛没有那么疲惫；后者通过深色模式来降噪，从而突出主体内容部分。快速开发一个深…

在安卓中，直接使用原生 video 会导致全屏播放，盖住所有元素，因此使用 x5 播放器。但是 x5 播放器还是存在问题，虽然不会盖住元素，但是会自己添加特效（盖一层导航栏蒙层）。 这样可以在安卓下使用 x5 播放器， playsInline 及 webkit-playsinl…