之前听人说过,网站制作中字体单位应该用em而不用px,为什么呢?原因简单来说就是em支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,而em是相对单位支持字体缩放。

而rem是一个更好的东西。如果没有兼容IE8的顾虑(rem需要IE8+才支持,rem适用于多语言模版的网站),rem可以说是一个非常理想的单位。rem和em一样是相对单位,只是有别于em相对于父元素,rem相对于根元素html,即root em。
在网页设计中我们经常看见html{font-size: 62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与px相互转换,em的初始值为1em=16px,当设置了html{font-size: 62.5%;}时,1em则=16px*62.5%=10px,1.2em则=12px,这样就简单明了多了。

总结:rem是基于根元素的相对扁平级联计算单位,典型适用于需要整体调整字体大小的场景,如多语言网站。

补充,在上面操作的基础上在谷歌浏览器当中,如果你设置width:1rem;结果得到的不是10px而是12px,这是因为谷歌浏览器默认设置最小字体为12px,这时候我们只需设置下浏览器最小字体就可以得到1rem为10px了。

调为10px然后按“完成”按钮即可。

px,em,rem的关系的更多相关文章

  1. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  2. px,em,rem的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  3. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  4. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  5. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

  6. 彻底弄懂px em rem

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  7. px em rem区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  8. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  9. css里px em rem特点(转)

    1.px特点: 1.IE无法调整px作为单位的字体大小: 2.Firefox能够调整px.em和rem. px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. 2.em特点: 1.em的值并不 ...

随机推荐

  1. 一篇关于Python装饰器的博文

    这是一篇关于python装饰器的博文 在学习python的过程中处处受阻,之前的学习中Python的装饰器学习了好几遍也没能真正的弄懂.这一次抓住视频猛啃了一波,就连python大佬讲解装饰器起来也需 ...

  2. IIS下防止mdb数据库被下载的实现方法

    第一种方法:要求网站管理人员具体asp编程经验.因为现在的销售虚拟主机的系统,已经为用户建立了一个database目录,跟web目录同一个级别,用户访问的是web中的文件,而无法访问database目 ...

  3. akoj-1148-小光棍数

    小光棍数 Time Limit:1000MS  Memory Limit:65536K Total Submit:197 Accepted:94 Description 最近Topcoder的XD遇到 ...

  4. Hibernate中HQL函数汇总及获取当前时间进行比较举例

    在很多时候,我们负责的项目中,在数据访问层(DAO层)通常我们会使用sql语句或者hql语句,而在我们使用hql语句拼接时有时会报错,通常的原因是:我们使用了标准的sql语句,开启的确是hiberna ...

  5. python学习===计算字符串中子串出现的次数。

    if __name__ == '__main__': str1 = input('input a string: \n') str2 = input('input a sub string: \n') ...

  6. 【有意思的BUG】默认置灰的属性的值传递

    数据由Client发送给Server,如下图所示,Server在收到请求后会响应Client. 比如Client发送给Server一组数据:Name:sean&Hobby:movies& ...

  7. sqlite数据库之简单操作

    一 sqlite介绍 Sqlite是一种嵌入式数据库,类似于一个文件系统,是跟程序在一起的.跟mysql等数据库程序跟数据分离是不一样的. 应用场景:常用于保存本地配置,类似于本地文件系统,因此他内嵌 ...

  8. ExtJs 思维导图

    搭建环境: 1. 建tomcat , eclipse2. 复制 Extjs 到 项目的 webcontent下 (建议用自己一个熟悉的Extjs版本,我用Ext JS 4.2), 备份一个ext目录, ...

  9. Android中的文件下载——DownLoadManager

    一.问题概述 在android开发中,经常会使用到文件下载的功能,比如app版本更新等.在api level 9之后,android系统为我们提供了DownLoadManager类,这是android ...

  10. css基础内容之background

    html如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...