• 关于px、em和rem的学习笔记!


      刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助!

    px

      px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

      譬如,Windows的用户所使用的分辨率一般是96像素/英寸。

      而MAC的用户所使用的分辨率一般是72像素/英寸。

      特点:

      1. IE无法调整那些使用px作为单位的字体大小;

      2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

      3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

     

    em

      em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px)。(引自CSS2.0手册)

      任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

      为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样10px=1em。

      特点 :

      1. em的值并不是固定的;

      2. em会继承父级元素的字体大小。

     

    rem

      rem是CSS3新增的一个相对单位(root em,根em),(font size of the root element)是指相对于根元素的字体大小的单位。

      区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

      这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

      目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

      p {font-size:14px; font-size:.875rem;}
      注意:  选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

    其他资料:

      一个px,em,rem单位转换工具,地址:http://pxtoem.com/

      web app变革之rem:http://isux.tencent.com/web-app-rem.html

      彻底弄懂css中单位px和em,rem的区别:http://www.cnblogs.com/leejersey/p/3662612.html

      CSS里面的长度单位px/pt/em/in/pc/mm/cm解释:http://blog.sina.com.cn/s/blog_835498980100tjzd.html

  • 相关阅读:
    Android如何实现超级棒的沉浸式体验
    这次聊聊Promise对象
    svn add文件名包含@符号的解决方案
    证明3|n(n+1)(2n+1)
    Xcode迁移工程常见问题
    Multiple build commands for output file
    python中descriptor的应用
    xcode快捷键
    Cycript
    令assignment操作符返回一个reference to *this
  • 原文地址:https://www.cnblogs.com/PCH1024/p/5357283.html
Copyright © 2020-2023  润新知