• CSS中em、rem和px的区别


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

    EM特点 

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

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

     

    rem特点 

            rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。为了方便理解,我们就理解rem为root em,顾名思义rem只相对跟节点<html>计算,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同em,默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px,以此类推。。。

     

    声明一下:rem是css3属性,没错!这就是说屌丝ie678不支持rem属性,只有chrome、firefox等高富帅支持!那么我们就在ie678中用px做兼容处理,例如:

    .box {
        font-size: 14px; /* 用来兼容ie678 */
        font-size: 0.875em; 
    }

    PX特点

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

    如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚页面的时候(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱。

  • 相关阅读:
    如何让touchmove之后不触发touchend的事件
    解决alert在ios版微信中显示url的问题(重写alert)
    meta常用标签总结
    HTTP状态码
    前端用到的一些功能
    判断鼠标从哪个方向进入--jQuery
    jsonp是什么
    数据结构与算法之链表-javascript实现
    数据结构之栈-JavaScript实现栈的功能
    数据结构之列表-javascript实现
  • 原文地址:https://www.cnblogs.com/PeterSpeaking/p/5849152.html
Copyright © 2020-2023  润新知