不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准…

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

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

1. 安装amfe-flexible和px2rem-loader 2. 配置amfe-flexible 3. 配置px2rem-loader 4. 展示效果 1. postcss-aspect-ratio-mini 有一点需要特别注意：aspect-ratio属性不能和其他属性…

一. 什么是vw适配 二. vw适配的兼容性 三. 如何在移动端H5项目webpack构建中引入vw适配 postcss是一个平台，其本身不对 CSS进行处理，但是通过在该平台上集成插件，可以实现对CSS的操作。 压缩和清理CSS代码。在webpack中，cssnano和…

之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）…

为了保证在低版本的机型也能正常显示页面，可以引入 viewport-units-polyfill 来处理 vw 的兼容问题。 viewport-units-polyfill 其实是 viewport-units-buggyfill 的简化版。 简单介绍下 viewport-un…