前段时间我的移动端适配解决方案一文在评论区引发了激烈的讨论。其中讨论最多的就是，移动端rem的适配已经淘汰了，目前大家使用的都是viewport。

近段时间，在开发移动端项目的时候，产品提了一个“自定义页面”的需求，刚开始在DevTools上做得顺风顺水，一马平川，直到在提交到测试环境用不同的真机访问页面时，却发现了一个很严重的问题：安卓的高倍屏展示自定义页面组件间距的时候会比iPhone要大很多（组件间距由js代码控制s…

在过去的几年时间里，移动端web野蛮生长，智能机的Android阵营和IOS阵营分庭抗礼，随之产生了多个系统版本（系统版本多样）；五花八门的屏幕尺寸、屏幕展示技术（如大名鼎鼎的Retina技术屏）层出不穷（屏幕尺寸、技术多样），还是CSS的W3C标准在各式各样的移动端浏览器上落…

多倍屏是指1个逻辑像素对应多个物理像素。在2倍屏下，1个逻辑像素就对应2个物理像素；在3倍屏下，1个逻辑像素就对应3个物理像素。正如我们的标准设计稿尺寸是7501334(也就是iphone6、7、8能够显示的像素)，虽然我们的iphone6、7、8的屏幕尺寸是375667，但屏…

最近半年一直在做移动端h5，主要环境为微信、和app内的WebView。期间遇到很多不同系统和设备的兼容性问题，希望在这整理成集锦，便于日后查找。当然，如果你也刚好遇到同样的问题，希望对你有所帮助。 1. 音视频问题 微信中不允许自动播放。但是可以借助WeixinJSBridg…

发现这个问题是因为验收过程中被设计小伙伴吐槽在不同手机设备下同样是1px宽度的border却显示不同宽度。 在和设计小伙伴一番沟（zheng）通（bian）之后，我陷入了沉思并且提出了以下问题。 要解答上述的问题，首先我们需要的就是先理清楚相关的概念。 px其实是pixels的…

（1）通常情况下，根root = 16px，所以1rem = 16px ======> 导致计算困难。例如有207px的设计稿，对应的rem = 207/16 …… （2）设计稿通常不会是我们设备的大小，而是会设定成设备的2倍稿或者是3倍稿。比如基于iphone6（375px）…

很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 相信我们所有前端开发者，都是见证了手…

布局和样式，是每个前端的必修课。在日常的工作中，也会碰到一些特定场景的布局需求，配合上样式，就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局，以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享。 由于篇幅原因，会分为 2 篇。今天，会先介绍一些有趣而又实用的布局的写…