zoukankan      html  css  js  c++  java
  • 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-),你会发现页面结构产生了不可预知的错乱。

  • 相关阅读:
    Web项目的WEB-INF目录使用说明以及重定向与转发
    HTTP中的重定向和请求转发的区别
    001杰信-创建MyEclipse与maven项目
    009Maven_建立私服——报错问题
    008Maven_建立私服
    007Maven_在Myeclipse创建web项目
    006Maven_在Myeclipse创建java项目
    005Maven_Myeclipse和Maven整合
    微服务架构下分布式事务方案
    推荐:Java性能优化系列集锦
  • 原文地址:https://www.cnblogs.com/PeterSpeaking/p/5849152.html
Copyright © 2011-2022 走看看