使用Rem解决移动端设备适配问题

相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，这里介绍一种比较简单的方案-rem

常用解决移动端布局的方案大概有:

• flex弹性布局
• 百分比
• rem布局

百分比布局

百分比布局采用百分比设置元素宽高，不再赘述

---

flex布局

• 父级设置display为flex
• 子级通过flex参数来设置缩放比例，缩放条件，排序方式等，不再赘述

---

今天我们重点要介绍的是:

Rem布局

下面提供两种思路:

style1:

• 设置根节点字体大小为100px(主要为了方便计算)，布局时使用原px/100得出rem值；
• 假设我们使用640px的设计稿(即iphone5，分辨率320x，dpr=2),只需要在js中计算当前设备的clientwidth,然后用100*(clientwidth/640)即可适配当前设备
• 计算的代码在这里:

(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

---

style2:

• 通过meta标签中的viewport以及缩放属性max/minScale来控制页面缩放比例，动态设置 html 的font-size, 同时根据设备DPR(设备的物理像素和 dip 的比例)调整页面的缩放值
• 我们同样需要经过js计算，根据设备的window.devicePixelRatio值来获得设备的bpr,自动完成meta标签的添加，并设置根节点的fontsize
• 下面是阿里团队的js实现方案:

• PS：这里默认的根节点font-size为100，因为默认设备dpr=2，若使用dpr=3的设计稿设计，你可以修改最后的参数为150，仍按px/100来设置em

  方案优点:

• 引用简单，布局简便
• 根据设备屏幕的DPR,自动设置最合适的高清缩放。
• 保证了不同设备下视觉体验的一致性

• 有效解决移动端真实1px问题

  关于背景图片大小适配

• css预处理语言（lass/sass或styl）针对不同的设备采取不同的图片地址

• srcset使用srcset属性，在background-image中使用-webkit-image-set设置(缺点:兼容性不是特别强)

转载于:https://www.cnblogs.com/heartbeatsong/p/6443188.html