方案一：rem+flexible，适配优点：没有破坏完美视口 ; 方案二：viewport，适配优点：所量即所得； 详细的代码部分可阅览详情。

随着Web技术的革新，移动端适配方案也在不断的变化，网上有很多关于移动端适配的文章，说什么rem布局已经过时，vw适配才是最好的适配方案。有这种理解的同学是错误的，任何适配方案都有它的优缺点，要结合自己的使用场景来进行选择。 文章先讲一下几种常见的适配方案，然后再看看几个大厂（…

H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题

因为接下来有个 H5 的页面要开发，虽说是 H5，但整体比较偏向 WebApp 形式。为了方便接下来的开发工作，于是就花了 3 - 4 天简单的封装了一套适用于项目的架子，并且将过程记录了下来，希望能与大家一起进步。 在进行移动端页面开发时，屏幕适配是首要问题。 移动端的界面开…

本文其实应该叫，Web 用户体验设计提升指南。 ... 所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。 良好的用户体验设计…

对于刘海屏的适配，你的脑子里首先得有苹果手机的 Safe Area 的概念，关于 Safe Area 网上的资料已经非常多了，这里就不再赘述，更偏向实战一点。但是为了比较，我这里给出一张苹果官方文档中，iPhone8之前的常规屏幕和刘海屏 Safe Area 区域的对比图。 1…

iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 大家都知…

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