cover 网页内容完全覆盖可视窗口，即页面完全充满屏幕，右图。适配关键！ 适配的核心是：通过 constant() 可以获取到非安全边距，再结合 padding 或 margin 来控制页面元素避开非安全区域。 Webkit在iOS11中新增CSS Functions: en…

... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？ 本文将从移动端适配的基础…

我们常用的其实就是px，em，rem，%四种，下文中我们将对常用的长度单位重点分析，对非常用的长度单位简单介绍。 首先我们要知道css中的长度单位可以分为两类：相对长度单位 和 绝对长度单位 。 css相对长度单位中的 “相对” 二字，表明了其长度会随着它的参考值的变化而变化，…

关于PPI、DPI、DPR、物理像素、逻辑像素等这些名词概念大家有所耳闻，也应该翻找了许多资料，无奈各种资料描述不一，概念混乱，一笔带过，甚至以讹传讹。没有什么实感去好好理解这些概念。 于是我尽自己所能，尽量描述，让大家有个实质性地认识。 小时候学过数学我们都知道，点成线，线成…

由于日常需求以无线居多，所以可以在业务中做一些尝试，如 rem，刚接触这个特性的时候，曾经一度爱不释手，仿佛在无线开发的坎坷路上寻找到一条捷径。然而随着使用范围的扩大，慢慢的发现了一些使用 rem 带来的问题。 关于 rem 这个单位的介绍，在此就不赘述，有兴趣的同学可以阅读一…

前两篇博客，把像素和viewport的概念讲清楚了。现在开始，用meta标签来设置viewport。 meta标签里面的内容，主要是提供关于这个HTML页面的元信息的。简单点说，就是你用这些信息来告诉浏览器，应该如何解析这个HTML文件。比如 这个标签是告诉浏览器，该HTML文…