移动端开发自适应方案rem

为什么80%的码农都做不了架构师？>>>   

rem是css3新引入的单位，在pc端会有兼容性的问题，对移动端比较友好。默认情况下，1rem等于html根元素的fontsize的大小。因此我们可以通过动态设置html根元素的fontsize，等比例缩放元素大小来自适应移动设备。

在这里我们引入一段动态设置html根元素fontsize的脚本：

这段脚本的作用是动态获取屏幕的宽度，然后除以我们自定义的值7.5。将得到的值设置为html根元素fontsize大小。

到这里小伙伴也许会问，1rem到底是多少呢？我该怎么使用呢？

我们从UI那拿到的设计稿一般宽度是640px或者750px，我公司美工出的移动端设计稿统一是750的，所以这里我们假设我当前手机屏幕宽度是750px，那么我设置一个参数为7.5。运行这段脚本我们html跟元素的fontSize就被设置为100px（750/7.5）了。

举个栗子：我们切图的时候通过ps测量出某个元素宽度是80px，那么我们在设置其宽度样式的时候就直接除以100，结果就是width:0.8rem;

知道rem怎么用了之后在实际开发中还有两个问题得注意：

一，为与屏幕等宽或者超过屏幕一半距离的盒子或图片设置宽度的时候，我们得使用百分比或者flex布局，而不能直接将值设置为7.5rem或3.75rem。否则会在小屏下出现横向滚动条。

二，像iphone5，iphone6手机宽度为320px与375px，但由于其dpr为2，所以一般我们手机截图在电脑上显示的尺寸则是640px，750px（dpr指设备像素比，当dpr为2的时候，移动端css的1px像素为2px物理像素）。这就导致了我们在电脑上通过测量出来的像素得先除去设备像素比。因此，还是之前说到的那个例子，我们测量出的某个元素为80px，在手机端显示应该只有40px，再除以转换比例100，则最终宽度为0.4rem。

 

 

转载于:https://my.oschina.net/cc4zj/blog/1635512