Wills's blogs

使用REM进行手机屏幕适配!

发表于 | 分类于 |

什么是REM?
在rem之前，我们知道em是相对于父元素的字体来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据您自己的所需。

浏览器的兼容性？
虽然rem是CSS3新引进来的一个度量单位，但是它支持的浏览器还是挺多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法，你们就把他们当透明了吧，我向来都是如此。

不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用”px”来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果，就让IE6-8不能随文字的改变而改变吧，现在基本要抛弃这些古老的浏览器了。

首先我们来看看使用 rem 实现手机屏幕适配的常用方案。

以设计稿的宽度为640px，即：designWidth = 640，同时设定在640px屏宽下 1rem=100px ，即：rem2px = 100。

设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候，通过直接位移小数点的方式，就可以将UI图中测量到的 px 值换算成对应的 rem 值，方便快捷。
此外，在 head 中我们还设置了： 

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

先来看看具体方案
方案1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

方案2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media screen and (min-width: 320px) {html{font-size:312.5%;}}
@media screen and (min-width: 360px) {html{font-size:351.5625%;}}
@media screen and (min-width: 375px) {html{font-size:366.211%;}}
@media screen and (min-width: 400px) {html{font-size:390.625%;}}
@media screen and (min-width: 414px) {html{font-size:404.2969%;}}
@media screen and (min-width: 440px) {html{font-size:429.6875%;}}
@media screen and (min-width: 480px) {html{font-size:468.75%;}}
@media screen and (min-width: 520px) {html{font-size:507.8125%;}}
@media screen and (min-width: 560px) {html{font-size:546.875%;}}
@media screen and (min-width: 600px) {html{font-size:585.9375%;}}
@media screen and (min-width: 640px) {html{font-size:625%;}}
@media screen and (min-width: 680px) {html{font-size:664.0625%;}}
@media screen and (min-width: 720px) {html{font-size:703.125%;}}
@media screen and (min-width: 760px) {html{font-size:742.1875%;}}
@media screen and (min-width: 800px) {html{font-size:781.25%;}}
@media screen and (min-width: 960px) {html{font-size:937.5%;}}

方案3： 

1
2
3
4
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
  ((window.innerWidth / designWidth) * rem2px) + 'px';

注：目标屏幕宽度和设计稿的宽度的比: 

1
2
window.innerWidth / designWidth * rem2px + 'px'

方案4： 

1
2
3
4
var designWidth = 640, rem2px = 100;
document.documentElement.style.fontSize = 
((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';

注：由于浏览器默认字体大小为 16px，所以当我们使用百分比作为根节点 html 的字体大小时，即html元素的font-size值设置为一个百分比值，rem 的计算方式就会改为：

1
2
defaultFontSize = 16px
1rem = 1 * htmlFontSize * defaultFontSize

同样的可以得到所有屏幕大小下，html 的 font-size 值的计算公式，即为方案4：

1
window.innerWidth / designWidth * rem2px / 16 * 100  + '%'

方案5： 

1
2
3
4
5
6
7
8
9
setRem();
window.addEventListener("orientationchange",setRem);//监听横屏
window.addEventListener("resize",setRem);//监听屏幕大小变化
function setRem(){
    var $html = document.querySelector("html");
    var width = $html.getBoundingClientRect().width;
    $html.style.fontSize = width / 16 + "px";//按比例设置不同大小屏幕下根节点的字体
}