关于CSS中用“rem" 在谷歌浏览器下的问题

来源：互联网发布：淘宝闲鱼怎么交易流程编辑：程序博客网时间：2024/05/21 06:50

rem是css3新定义的设置字体大小属性，常用的两种字体大小设置有下面2种：
1、 px为单位

2、em为单位(百分比用法跟em类似)

PX为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较精确和固定。只要页面某元素设置了px字体大小，其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素高的话，该子元素/子孙元素会继承其父元素的px字体大小设置。但种方法存在一个问题：当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站用户可读性、用户体验的前端人员来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

em为单位

前面也说了，使用是“px”会在浏览器中放大或缩放浏览页面时页面布局会被打破，要解决这个问题，我们可以使用“em”单位

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

实例：
父元素为16px，子元素设置为1.4em 则子元素实际字体大小16px x 1.4=22.4px
因此 “1.4em”可以是“14px”,也可以是“20px”，或者说是“24px”，总之是一个不确定值，至于确定值是多少，必须知道其父元素的值！

使用em应该注意的几点：
1、浏览器的默认字体大小是16px
2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算：
需要转换的像素值÷ 父元素的font-size = em值
3、如果元素自身设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：
需要转换的像素值 ÷ 元素自身的font-size= em值

详细阅读文章：http://www.w3cplus.com/css/px-to-em

rem单位

从上面的介绍可知，px单位的的设置会影响子元素/子孙元素的字体大小显示，而em单位的设置也是根据父元素的字体来确定的。这时候父元素的字体大小设置就显得很关键了！

而rem是相对于页面根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值即可，其它元素设置rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放，字体大小值标准参考图：

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

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} // 62.5% =10px;
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
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及以小的字体，所以如果用了 ”62.5%“，并且元素尺寸也用"rem"的话在谷歌浏览器显示，元素显示的尺寸比原来设计的要大很多，造成页面错位。解决的办法是将"font-size: 62.5%;"改为"font-size:312.5%;"即"1rem = 50px"】。不过这样计算起来比复杂。

0 0

关于CSS中 用“rem" 在谷歌浏览器下的问题

PX为单位

em为单位

rem单位

rem属性浏览器兼容性

关于CSS中用“rem" 在谷歌浏览器下的问题