使用rem在移动端会出现什么问题？

最新推荐文章于 2023-05-04 15:08:53 发布

原创最新推荐文章于 2023-05-04 15:08:53 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

40 篇文章

订阅专栏

Rem为单位

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

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

这里写图片描述
我们来看一个简单的代码实例：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

浏览器的兼容性

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**不能随文字的改变而改变**吧，谁让这个Ie6-8这么老呢？哈。。。。大家不仿试试，还蛮有意思，说不定这个就是主流的度量单位了。

问题又来了，如何根据设备尺寸来设置基准值？

有两个方法，通过css media query 和js添加基准值：

css media query:

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

用media query来实现难覆盖到所有设备：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
/*这段是只(only)针对彩色屏幕设备*/

@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

而通过js来设置，可以实现覆盖所有设备：

js来设置

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

关于方案的利弊，其实上面的例子里面可以看出，rem为整数的时候，基准值为32px，36px这样的整数，换成px也是整数。但rem带有小数，比如1.75rem，在32px的基准只下计算得56px。那再看看其他机型的换算值：

于方案的利弊，其实上面的例子里面可以看出，rem为整数的时候，基准值为32px，36px这样的整数，换成px也是整数。但rem带有小数，比如1.75rem，在32px的基准只下计算得56px。那再看看其他机型的换算值：

这里写图片描述

可以看出，有些机型里面是有小数像素值的。小数像素可能会带来一定的误差，设计的同事像素眼很容易觉察到的。

在可以接受的情况下允许这些误差存在。在安卓机子上较多出现这类情况。

使用rem的注意事项：

1.必须设置基本字体大小
2.有些机型里面是有小数像素值的。小数像素可能会带来一定的误差
3.到这里，可以假设：浏览器所做的渲染处理只是作用在元素的渲染尺寸上，但他们的真实尺寸仍是原始尺寸大小。

参考: http://www.w3cplus.com/css3/define-font-size-with-css3-rem © w3cplus.com
http://www.cnblogs.com/linda586586/p/5604675.html