zoukankan      html  css  js  c++  java
  • 理解em,rem以及rem的失效问题

      在平常做网站写代码的时候一般都是使用px,在之前的学习时就略微的学习了一些关于em、rem的知识,但是由于一直没有用到过,所以几乎全部忘记了。今天在研究一些知识的时候用到了em,所以特意将学到的知识总结一下。

    1.em

    em是相对长度单位,相对于当先对象中的字体尺寸。比如在某个div中font-size设置为20px,那么,1em就相当于20px,0.25em就相当于5px。由于浏览器的默认字体大小为16px,所以为了简化font-size的换算,就要在body的选择器中将font-size设置为62.5%,换算成像素,就是16*62.5%=10px,这样在之后的设置尺寸大小的时候就可以用1.2em代表12px,也就是说此时的换算关系就是1em=10px。

    值得注意的是em会集成父级元素的字体大小。所以不要轻易的在当前元素中改变em。

    2.rem

    rem和em有相似的使用方法,都是相对长度单位。不同的是rem需要在根元素html的css选择器中设置font-size,设置font-size为14px,则1rem就是14px。使用这个长度单位的好处是可以用于做适配。可以直接在<hmtl>中更改font-size就可以在不同的移动端显示不同大小的元素。我们都知道浏览器默认的字体大小都是16px,因此在一些书中会这样写到:将html的font-size设置成62.5%,这样就是10px,那么接下来的0.1rem就是1px了,这样好算。但是,在实际中我发现在谷歌浏览器中这个方法是不可行的。

      因为在谷歌浏览器中的默认字体大小虽然是16px,但是在html中却不可以将字体设置小于12px,如果小于12px就会默认以12px来计算。这样的话我们的62.5%为10px就破灭了。所以在我看来可能最好的方法就是设置成为20px了,也就是在html中设置字体为125%或是直接20px。

    资料来源:http://www.cnblogs.com/leejersey/p/3662612.html

  • 相关阅读:
    webp实践的javascript检测方案
    码农不算程序员 :)
    解决 phpmyadmin #2002 无法登录 MySQL 服务器
    xmlhttprequest upload
    shape-outside 矩形之外的另一种思路
    百度搜索词&淘宝搜索词 接口实现
    Sublime Text 2 破解 on Mac
    利用a标签自动解析URL
    rc4加密解密
    国内的一些前端框架
  • 原文地址:https://www.cnblogs.com/jyybeam/p/5847556.html
Copyright © 2011-2022 走看看