博客地址 ：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. Codevs2490 导弹防御塔

    2490 导弹防御塔 2490 导弹防御塔 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 大师 Master         题目描述 Description Freda的城堡—— ...

  2. leetcode 350 easy

    350. Intersection of Two Arrays II class Solution { public: vector<int> intersect(vector<in ...

  3. webpack学习之——npm的安装依赖情况

    这几天一直在研究webpack模块话打包工具,在网上的资源还是蛮丰富的,现在总结下这块的内容,需要好好的研究下,如果有问题,还请指正. 先是第一个为问题,就是npm-install --save 和n ...

  4. 覆盖equals时请遵守通用约定

    Object类中非final修饰的方法有equals().hashCode().toString().finalize().clone()1.equals()方法不需要被覆盖的情况:1)实例化的对象只 ...

  5. Python 经典正则表达式语法实例

  6. Spring → 《Spring程序开发》教材大纲

  7. k8s 超详细总结，面试必问

    一个目标:容器操作:两地三中心:四层服务发现:五种Pod共享资源:六个CNI常用插件:七层负载均衡:八种隔离维度:九个网络模型原则:十类IP地址:百级产品线:千级物理机:万级容器:相如无亿,K8s有亿 ...

  8. SDUT-2144_最小生成树

    数据结构实验之图论九:最小生成树 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 有n个城市,其中有些城市之间可以修建公 ...

  9. js遮罩

    1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...

  10. Gym - 101962B_Color Changing Sofa

    题意:将一个沙发放到一个分成好几个色块(一个字母代表一种颜色)的房间里,要求沙发染成跟所在色块一样的颜色,沙发分成(0,1)两种,0可以染成一种颜色,1可以染成一种颜色(换句话说,沙发最多两种颜色), ...