rem

rem单位

 

rem是一个相对的单位,他是相对于根元素html来说的,我们只需要在根元素确定一个参考值就可以,其它元素设置rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放,我们可以对html的根元素的字体进行设置,(如果没有进行设置,默认的html的根元素的大小是16px);

我们来看一个简单的代码实例:

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

我在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算:1.2rem即 12px ,1.6rem即16px  。 如果没有设置,将是以浏览器默认的“16px”为基准 )。

rem属性浏览器兼容性

rem是CSS3新引进来的一个度量单位,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。

【需要注意的问题:谷歌浏览器不支持10px及以小的字体,默认最小的字体为12px,所以如果用了 ”62.5%“,并且元素尺寸也用"rem"的话在谷歌浏览器显示,元素显示的尺寸比原来设计的要大很多,造成页面错位。解决的办法是将"font-size: 62.5%;"改为"font-size:20px;"即"1rem = 20px"】。

在页面遇到字体小于12px的情况是可以使用,谷歌低版本的浏览器可以设置 -webkit-text-size-adjust:none; 高版本的浏览器对此不适用;高版本浏览器的解决方法是: font-size: 12px;-webkit-transform-origin-x: 0;  -webkit-transform: scale(0.90);

posted @ 2017-08-23 22:39  橙子的代码世界  阅读(324)  评论(0编辑  收藏  举报