博客地址 ：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. 手机号测吉凶python代码

    根据数理数来测电话后四位吉凶: 数理数 解释批注 0点特殊.......大吉 1大展鸿图．可获成功吉 2一盛一衰．劳而无功凶 3蒸蒸日上．百事顺遂吉 4坎坷前途．苦难折磨凶 5生意欣荣．名利双收吉 6 ...

  2. 简单的layui二级联动

    用layui实现省市二级联动, 需要注意的是使用layui之后, 你看到的下拉选框就不是option了,而是一些div 1.select表单 2.JS, ajax返回的是普通的数组

  3. stack的基本使用方式

    #include <iostream> #include <stack>//头文件 using namespace std; stack<int> S; int m ...

  4. QT_强杀进程

    #ifdef WIN32 bool res = false; HANDLE hToolHelp32Snapshot; hToolHelp32Snapshot = CreateToolhelp32Sna ...

  5. 解决IE6、IE7、Firefox兼容最简单的CSS Hack

    写三句代码来控制一个属性,区别Firefox,IE7,IE6: background:orange; *background:green !important; *background:blue;   ...

  6. 使用 javascript 替换 jQuery

    使用 javascript 替换 jQuery jQuery 曾风靡一个时代,大大降低了前端开发的门槛,丰富的插件也是前端开发者得心应手的武器库,但是,这个时代终于要落幕了.随着 JS 标准和浏览器的 ...

  7. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  8. python 类的创建

  9. JavaScript--天猫数量输入框

    <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>无标题文档</t ...

  10. shell学习（22）- comm

    1.预备知识 comm命令可用于比较两个已排序的文件.它可以显示出第一个文件和第二个文件所独有的行以及这两个文件所共有的行.该命令有一些选项可以禁止显示指定的列,以便于执行交集和求差操作. 交集(in ...