zoukankan      html  css  js  c++  java
  • px em rem 区别

    PX:
    PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。
    因此,这时就提出了使用“em”来定义Web页面的字体。

    EM:
    EM就是根据基准来缩放字体的大小。EM实质是一个相对值,而非具体的数值。这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
    另外,em是相对于父元素的属性而计算的,如果想计算px和em之间的换算,这个网站不错,输入数据就可以px和em相互计算。狠击这里:px和em换算
    EM特点 

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

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

     

    所以我们在写CSS的时候,需要注意两点:

    1. body选择器中声明Font-size=62.5%;

    2. 将你的原来的px数值除以10,然后换上em作为单位;

    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。


    Rem:
    EM是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。

    浏览器的兼容性
    除了IE6-IE8r,其它的浏览器都支持em和rem属性,px是所有浏览器都支持。
    因此为了浏览器的兼容性,可“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。


    选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

    在这里为大家提供一个px,em,rem单位转换工具

    地址:http://pxtoem.com/

     

    参考:http://www.w3cplus.com/css3/define-font-size-with-css3-rem

     

  • 相关阅读:
    json格式
    UICollectionViewLayout继承UICollectionViewFlowLayout自定义布局
    iOS中如何生成二维码
    Xcode升级之后插件无法使用与不小心点击Skipbundle的解决办法
    如何上传本地代码到github
    Xcode实用快捷键以及Mac一些常用指令
    0925-0926 函数注意点
    0921控制结构注意点
    0920逻辑运算符,位运算,移位运算,三元运算符,短路性注意点
    0919表达式&运算符注意点
  • 原文地址:https://www.cnblogs.com/phermis/p/5818066.html
Copyright © 2011-2022 走看看