zoukankan      html  css  js  c++  java
  • 浅谈px,em和rem这些单位的区别

      px,em,rem三个单位在前端中十分常见,但是很多时候刚刚接触会觉得不明觉厉,今天恰巧学到这些,留下一些自己的对这些单位的理解。

      1、单位px

    ·    px是相对长度单位,是相对屏幕分辨率而言的,简单地说就是1px等价于1分辨率,这个十分好理解

      2、单位em

        em是相对长度单位,是相对于当前对象内的文本的字体尺寸而言的(这是理解em单位最核心的一句话),举个例子:

        有下面一段代码:

          

    <div>
        大家好
        <p>hello</p>
    </div>

        如果<html>的字体尺寸是默认的(16px),那么<html>下的1em=16px;通常会设置<html>的Font-szie:62.5%,这样16px*62.5%=10px,如此1em=10px。而此时,<html>的  内容就是上面的代码,这时如果文本“大家好”的font-size=1.2em,则应该换算成12px,注意:如果此时<div>中的<p>中的文本“hello”的font-size=1.2em,就不应该是和  文本“大家好”一样,而是应该换算成1.2*1.2*10px=14.4px(小于0.5px,浏览器识别不了);也就是之前提到的红字部分的核心理解语句。

      3、单位rem

        rem是相对长度单位,是相对于<html>的font-size而言的,即默认情况下<html>的font-size=16px,那么1rem=16px;通常情况下会设置<html>的font-size:62.5%,即    <html>的font-size=10px,此时1rem=10px;但是它跟em却别在于,无论你的文本放在哪,它都是相对于<html>根元素的。

  • 相关阅读:
    ORACLE CASE WHEN 及 SELECT CASE WHEN的使用方法
    myeclipse6.0下载及注冊码
    tcpdump抓包分析具体解释
    经常使用的android弹出对话框
    我对Laravel ThinkPHP Yii symfony2 CI cakephp 的看法
    MFC原创:三层架构01(人事管理系统)DAL
    struts2操作数据库
    EJB究竟是什么,真的那么神奇吗??
    Android简单发送邮件(可带附件)
    java实现SPFA算法
  • 原文地址:https://www.cnblogs.com/abab301/p/9578787.html
Copyright © 2011-2022 走看看