css rem计算

先抛出一个问题:为什么要选择rem?

px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem。

em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个div里的1em=4px,这么嵌套下去的话,抱歉,我数学不好!所有rem就出现了。

rem:是em的升级版,rem只会相对html的值,不会受到父级的影响,这样的好处在于:从em里的例子来讲,1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的,所以ie8或以下请无视(始终想不明白,为什么国人至今对微软都放弃的ie这么恋恋不舍)。

以上也算是讲清了他们之间的区别和关系,rem更多的运用于移动H5页面的适配使用。

1,假设设计稿 页面宽度是750px,那么定义1rem=100px, 750px=7.5rem.

然后如下 计算出html的font-size值。

<script type="text/javascript">
init();
window.onresize = init;
function init(){
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 7.5 + 'px';
}
</script>

2,页面某个元素宽12px,那么可写为0.12rem,实际值 浏览器会用0.12乘以html的font-size换算为实际的px值

上一篇:[转]异常:android.os.NetworkOnMainThreadException


下一篇:推荐一个比crontab更好用的东西:crongo