博客地址 ：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. 洛谷P1855 榨取kkksc03 [2017年4月计划 动态规划 09]

    P1855 榨取kkksc03 题目描述 洛谷的运营组决定,如果一名oier向他的教练推荐洛谷,并能够成功的使用(成功使用的定义是:该团队有20个或以上的成员,上传10道以上的私有题目,布置过一次作业 ...

  2. 阿里云SaaS生态战略发布：成就亿级营收独角兽

    导语:本文中,阿里云智能资深技术专家黄省江从“势”“道”“术”三个方面分享了自己对于SaaS生态的理解,并介绍了SaaS加速器发布以来在产品.技术和商业侧最新的一些进展. 在321北京峰会上,阿里云公 ...

  3. C#中抽象方法与虚方法的区别（转）

    C#中抽象方法与虚方法的区别   一.抽象方法:只在抽象类中定义,方法修饰符不能使用private,virtual,static. 抽象方法如下示: public abstract class Peo ...

  4. Xdebug步骤

    谷歌浏览器安装xdebug cd  /etc/php/7.2/fpm/conf.d 重启sudo service php7.1-fpm restart   (注意 php版本) 重启编辑器

  5. es安装遇到的问题

    问题1: es一闪即逝的问题?java的jdk环境变量没有配置好, JAVA_HOME没有配置好 必须在系统变量里面添加JAVA_HOME: C:\Program Files\Java\jre1.8. ...

  6. MAC+VS Code+Python+Markdown调试配置

    目录 VS Code官网下载 VS Code插件推荐 VS Code Python环境配置 Markdown配置 VS Code官方文档 VS Code官网下载 VS Code官网下载地址 VS Co ...

  7. 用五种不同的布局方式实现“左右300px中间自适应”的效果

    float浮动 <section class="layout float"> <style media="screen"> .layou ...

  8. 使用virtualenv使得Python2和Python3并存

    1:下载python3源码并安装 wget https://www.python.org/ftp/python/3.6.4/Python-3.6.4.tgz .tgz cd Python-.tgz . ...

  9. java中的volatile和synchronized

    关于volatile和同步相关的东西,网上有太多错误和解释不清的东西, 所以查阅相关书籍和文章后总结如下, 如果还是也存在不正确的内容,请一定要指出来, 以免误人子弟:) 1. 原子性与可视性 原子性 ...

  10. docker 与host互传文件

    docker 的cp命令可以从容器往外复制,也可以从本机复制的容器. docker cp 文件路径 容器id:/容器目录 docker help cp Usage:    docker cp [OPT ...