• px em rem的详解与区别


      在前端项目开发中,px,em,以及rem都是页面布局常用的单位,虽然它们是长度单位,但是所含的意义不一样。通过复习和查阅,总结了以下知识。

          px像素(Pixel)

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

        特点:

          1:px代表的是像素,用它设置字体大小时,比较稳定和准确。

             2:px的数值是写死的,Ie中没办法改变这些字体的大小。

         运用:

    <style>
     p{font-size:18px}    
    </style>

           em

        定义:是相对长度单位。相对于当前对象内文本的字体尺寸(通常是针对于其父元素的尺寸)。(引自CSS2.0手册)

        特点:

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

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

        运用:

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

           为了简化操作,在css的body标签中声明font-size为62.5%,这样在写原来的px的数值除以10,然后换上em就可以了,原因:16px*62.5%=10px,例如:12px=1.2em,

    <style>
    body{font-size: 62.5%}
    p{font-size: 1.2em}
    </style>

            rem (font size of the root element)

                  定义:是CSS3新增的相对单位,它只是相对于html标签来设定的。  

                  特点: 只针对与html的大小而变化,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

         缺点: 兼容性问题,IE6-8不支持该单位,解决办法:就是在标签中添加绝对单位如em,px。这样IE6-8会自动忽略rem选择em或px。

         运用:在css中html标签添加font-size的值,一般是62.5%,为了方便计算。在所有的子标签中就可以针对于html的大小进行改变。如:

    <style>
    html {font-size: 62.5%;}
    body {font-size: 1.8rem;}
    h1 { font-size: 2.2rem;}
    </style>

      在新版本的浏览器都支持rem这个单位, 只有IE才有兼容性问题,选择使用什么字体单位主要由你的项目开发来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

               

        

  • 相关阅读:
    NOIP2017宝藏
    ARC114
    字符串乱记
    [SDOI2016]储能表
    quq
    口胡图论
    一双木棋 chess
    数论小记
    CF961G Partitions
    [HAOI2016]字符合并
  • 原文地址:https://www.cnblogs.com/sqh17/p/7354293.html
Copyright © 2020-2023  润新知