博客地址 ：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. 集训队日常训练20180513-DIV1

    A.3132 给一个有向图,问能否从任意点出发都能进入一个环中. 深搜. #include<bits/stdc++.h> using namespace std; ; vector< ...

  2. golang之select

    2.switch语句 (1) (2) 3.select语句 4.for语句 (1)常规式 (2)条件式 (3) (4) goto break continue fallthrought ------- ...

  3. line-height的用法（一）

    行高”顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离. 从上到下四条线分别是顶线.中线.基线.底线,很像才学英语字母时的四线三格,我们知道vertical-align属性中有top.m ...

  4. Linux下的MySQL主从同步

    网上一些关于Linux下的MySQL主从同步教程非常之多,有些很简单的配置却弄的非常复杂,有些根本无法配通,下面是我通过简单的配置完成的主从同步过程,大家可以参考,此文章更适用于新手. 一.测试环境: ...

  5. cmd操作oracle

    利用cmd的操作命令导出,详情如下(备注:方法二是转载网上的教程):1:G:\Oracle\product\10.1.0\Client_1\NETWORK\ADMIN目录下有个tnsname.ora文 ...

  6. Linux常用命令6 压缩解压命令

    .zip是Linux和Windows共有的压缩格式 1.压缩解压命令:gzip 命令英文原意:GNU zip   命令所在路径:/bin/gzip 执行权限:所有用户 语法: gzip [文件]   ...

  7. PHP开发api接口安全验证的实例，值得一看

    php的api接口 在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道 ...

  8. 信息摘要算法 MessageDigestUtil

    package com.xgh.message.digest.test; import java.math.BigInteger; import java.security.MessageDigest ...

  9. SFINAE and enable_if

    There's an interesting issue one has to consider when mixing function overloading with templates in ...

  10. springboot对shiro进行mock单元测试

    环境:junit-5.Spring5.0.x.Spring Boot 2.0.x 以下是用来权限测试的接口: @ApiOperation("[可接入]分页查询管理员") @ApiR ...