博客地址 ：https://www.cnblogs.com/sandraryan/

px 我们都很熟悉啦，但是固定大小无法适配各种屏幕。

rem是CSS3新增的一个相对单位（root em，根em），还是相对单位，但相对的是HTML根元素。

rem有多方便呢，那就是通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

也就是根元素设置px值，其他子元素都设置rem值，设置了rem的元素大小会根据根元素的大小成比例缩放，如果需要修改整套页面的大小，仅修改根元素px就可以。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        p {

            margin:;

        }

        html {

            font-size: 1px;

        }

        .p1 {

            font-size: 5rem;

        }

        .p2 {

            font-size: 10rem;

        }

        .p3 {

            font-size: 15rem;

        }

        .p4 {

            font-size: 20rem;

        }

        .p5 {

            font-size: 25rem;

        }

        .p6 {

            font-size: 30rem;

        }

    </style>

</head>

<body>

    <div>

        <p class="p1">p1</p>

        <p class="p2">p2</p>

        <p class="p3">p3</p>

        <p class="p4">p4</p>

        <p class="p5">p5</p>

        <p class="p6">p6</p>

    </div>

</body>

</html>

现在忽然改需求，说这字太小了，改。

然后，我萌就动手了

 html {

            font-size: 2px;

        }

为了看出来效果，就没修改截图的比例~~~~~

em是相对长度单位。

em会继承父级元素的字体大小。如果没有设置，则是相对于浏览器的默认字体尺寸。

浏览器默认字体16px，1em=16px。

为了方便计算，一般在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

<p class="p4">父级10px，自己2em的p</p>
 div {

        font-size: 16px;

    }

    .p4 {

        font-size: 2em;

    }

尝试把父级字体设置为62.5%

 <div class="div">

        <p>父级62.5%，p为16em</p>

        <p>16px</p>

    </div>
 .div {

        font-size: 62.5%;

    }

    .div p:first-child {

        font-size: 1.6em;

    }

    .div p:last-child {

        font-size: 16px;

    }

两个都是实际16px大小。

三个一起举（三）个例子 分别使用三个单位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    html {

        font-size: 1px;

    }

    .p1 {

        font-size: 16rem;

    }

    .p2 {

        font-size: 16px;

    }

    .p3 {

        font-size: 16em;

    }

    </style>

</head>

<body>

    <div>

        <p class="p1">设置为16rem的p</p>

        <p class="p2">设置为16px的p</p>

        <p class="p3">设置为16em的p 父级没fontsize，相对于浏览器默认的16px</p>

    </div>

</body>

</html>

显示成这样子

px em rem %作为单位使用的更多相关文章

  1. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

  2. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  3. px em rem 字体单位问题

    px:相对长度单位,相对于屏幕分辨率 em:相对长度单位,相对于body而言 rem:相对长度单位,相对于html根元素 注意:浏览器默认大小:16px;

  4. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  5. px,em,rem的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  6. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  7. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  8. 彻底弄懂px em rem

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  9. px em rem区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

随机推荐

  1. SQL竖表转横表Json数据

    1.数据准备 create  table  Vertical(  Id  int ,  ProjectName varchar(20),  ProjectValue int ) insert into ...

  2. ecshop二次开发之单点登录

    单点登录(SingleSignOn),简称为SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 当用户第一次访问应 ...

  3. SQLSERVER 时间函数汇总

    1.求当天的年份 (getdate(): 2012/05/08 18:07:26) SELECT YEAR(GETDATE())     --2012 2. 求当天的月份       SELECT M ...

  4. golang之常量

    1.  常量可以是全局常量,也可以是函数内部的局部常量.常量的值不可修改,常量表达式的值在编译期计算,而不是在运行期.存储在常量中的数据类型只可以是布尔型.数字型(整数型.浮点型和复数)和字符串型.当 ...

  5. ES6 中字符串的扩展

    1. 字符的Unicode表示法 JavaScript允许采用 \uxxxx 形式表示一个字符,其中 xxxx 表示字符的 Unicode 码点. "\u0061" // 表示小写 ...

  6. JavaEE架构简介与JavaWeb新特性

    Fragment 将一个web应用做成几个部分,然后整合 创建Fragment项目   然后打包放入Servlet项目中的WEB-INF下的lib中 注解 @WebServlet @WebServle ...

  7. php的模板原理

    下载了开源论坛phpbb的代码,突然对php模板初步了解了一下: php与Html在一起编写真的是很烦人,所以必须要把数据计算以及显示格式分离,这就需要模板来实现了. http://baike.bai ...

  8. 使用php simple html dom parser解析html标签

    转自:http://www.blhere.com/1243.html 使用php simple html dom parser解析html标签 用了一下 PHP Simple HTML DOM Par ...

  9. Windows中查看PowerShell版本和virbox版本，vagrant 版本

    我并不是很熟悉什么是PowerShell,但是有种直觉是:如果想在Windows中使用系统自带的功能取代bash shell,PowerShell或许是比DOS批处理更好的选择.不过,从头开始再来一门 ...

  10. CSDN编程挑战——《-3+1》

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/user_longling/article/details/24674033 -3+1 题目详情: 有 ...