本文是内部的一次分享沉淀，偏向基础但是涉及了一些有意思的细节，文笔有限，才疏学浅，文中若有不正之处，万望告知。 前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。 而本文的主题 -- 移动端开发的兼…

基本一直都在做移动端的开发，rem布局也写了很久，不过对于实现的原理有些模棱两可的盲点，自己总结一下留着以后回顾。 本文分以下几个层面，主打用最最通俗的语言来阐述。 viewport是什么？翻译过来就是视窗的意思，只不过在移动端，视窗稍微有点绕。在解释这个之前，不得不引出几个词…

自适应的解决方案

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

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。 在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。

我们可以用红蓝绿可以调配出任何颜色,我们常说的手机像素就是由许多红蓝绿组成的一个小块,1个小块表示1个像素. 上图,横向有7个小块 纵向有7个小块,表示7*7像素. 因为在尺寸没有改变的情况下.物理像素增加.因此css中的1px并不能等于设备的1个物理像素. 目前主流的做法是用…

刚入前端的坑时，研究了许久怎么让页面适配各种移动端，后来发现了 rem，记录下研究过程

屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。 单屏适配有 contain、cover 或 fill，多屏常见是 依宽 。 contain 和 cover 还需要 定位 来处理留白和超出的内容。 而同一个 H5 里不同内容往往用不同适配方式，即 分层。 对于屏幕适配这类…

在 Viewport 等比适配始末 说过使用 Viewport 来实现等比适配的例子，本文详解等比适配的另一种方式 推导 拿到一个宽度为 vWidth 的视觉稿设设备屏幕宽度为 dWidth 在视觉稿上量得一个元素的宽度为 eleVWidth 那么要实现按照宽度等比适配，在各种设备…