这两年小程序开发火爆，小程序推荐使用的rpx单位，即：750的设计稿，1rpx=1px，750rpx=100vw=100%，这个方案最大的好处在于，设计稿标记的尺寸可以直接用来写css，不需要任何工具计算，开发者无需考虑兼容问题，都由小程序自己去兼容。 这给了我们团队一个启发：…

1. 使用less.js将px转换vw

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

就目前看来，web的屏幕适配是贯穿整个前端行业的，如常见的PC端，移动端，响应式，小程序等。 正是因为 PC端上的浏览器大小会经常被改变，而且改变的范围还很大，用户会全屏浏览器，用户也会缩小浏览器到一个很小的值，如600px左右。 所以pc端上如果使用流式布局(百分比布局)，会…

移动端适配的问题，一般来说我们都不会去深究，因为这种东西都是配置一次就再也不用管的了，接到设计图就按照祖传套路撸就完事了。按部就班的必定只能成为活动页写手，研究透彻以后，才能成为一名专业的活动页写手嘛。 文章开始，我们需要来捋清楚像素、视口以及缩放之间种种藕断丝连的关系，来抽丝…

既然是适配我们开始肯定要有一个参考屏幕，这里我们先提前确定下面所有的例子都是以iphone6的屏幕（宽度为375px）为参照。通常设计稿是2倍的设计稿，所以我们拿到的设计稿设计稿最终宽度为750px。 屏幕适配最终的目标或者说本质就是实现 等比缩放。 为什么要有个基准？因为我们…

有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。…

移动端自适应的一些方法

自适应不同宽度的设备，最大程度还原视觉稿比例。 问题：百分比参照的容器的宽度是不同的，需要一个统一的参照，布局比较复杂的情况不太适用，这种方法也不利于后续布局变更的维护。 也是我最早接触移动端开发的时候使用的方法，使用rem单位。 以上只是实现了参照的统一，并没有达到不同终端适…