最近在做移动端的开发，深入了解了下移动端适配的一些问题，加上自己的理解，记录下来，写一个小的系列博客，与大家分享。所有的问题，就开始从像素说起吧~ 像素是一个经常提到的概念，写CSS的人都经常会用到px作为单位。但是，在移动端，看着分辨率高达1125x2436的iPhone X…

当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。 我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来…

em 和 rem 是配合 flexible 方案非常火的一种相对单位， 虽然该方案已经凉了，但依然是当前兼容性最好的可伸缩布局方案。 两者的差别只是 rem 总是以根节点 (html) 的字体大小作为参考，你看命名 rem 就是 root em，而 em 则以当前元素的字体大小…

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。 CSS仅仅是一个标记语言，不可以自定义变量，不可以引用。 没有变量和合理的样式复用机制，使…

今天遇到一个很有趣的问题：「如何实现一个宽度自适应，高度为宽度的一半的矩形」。 经过搜索引擎的筛选和自己的反复试验,发现使用padding-bottom是最完美的解决方案。 首先我们要明白，padding-top/bottom和margin-top/bottom都是相对于父元素…