移动端开发之px，em和rem详解

px:表示的是绝对的像素值，1px就是1像素大小

em:关于em，网上有资料说是关于父元素的，但是其实个人感觉这种说法是不对的，其实em的大小是根据自身的font-size确定的，而只是正常的情况下子元素继承了父元素的font-size

rem:是指根元素的大小，比如跟元素大小是16px(浏览器默认font-size)，那么1rem的大小就是16px

举个例子：

我们先来写一段代码：

    <div class='div1'><div class='div2'></div></div>

        .div1{width: 100px;height: 100px;font-size: 16px;}.div2{width: 1em;height: 1em;background: red;}

上面的代码中，我们在浏览器运行就会得到结果，div2的width和height为16px，也就是现在div2元素的font-size的值也就是他的父元素设置的font-size的值，下面我们来改写下上面代码的css：

        .div1{width: 100px;height: 100px;font-size: 16px;}.div2{width: 1em;height: 1em;font-size: 12px;background: red;}

当我们在div2的style里面设置了自己的font-size为12px，我们在运行代码，我们可以得到我们当前的div2中的width和height的值为12px。这样子我们就可以得到结论，em的值其实是根据自己来设定的，准确的说是自己的font-size的值，由此可见网上很多说em是相对于父元素的值的说法是错误的。

但是在开发中我们的每个元素都有不同的font-size那么我们就需要根据这个计算出不同的width和height的em值，这样子无论是开发还是维护起来成本都太高了，还有一个更严重的问题是层级嵌套会让我们对每个元素的font-size变得混乱。

所以一个更加友好的元素rem诞生。

所谓的rem根据的就是跟节点的font-size的值，举个例子：

        html{font-size: 20px;}.div1{width: 1rem;height: 1rem;font-size: 12px;background: red;}

        <div class='div1'></div>

运行上面的代码，我们得到了当前div的width和height的值为20px，看来rem集成的是html的font-size并没有继承自己的font-size这样子我们开发起来就有一个相对的值了，这样的意义在于我们可以根据不同页面的width来设置不同的font-size值来实现移动端的适配问题，这个也就是手淘flexible的设计原理了，下一章我将会给大家讲解一下关于flexible的源代码！

转载于:https://www.cnblogs.com/jcscript/p/5789403.html

移动端开发之px，em和rem详解相关推荐

Flutter开发之iOS后台定位开发详解
Flutter开发之iOS后台定位开发详解需求目的开发一个功能持续获取用户的位置发送给后端,PC端会根据后端传来的移动端发送的位置信息,来绘制使用者的运动轨迹. 实现需求是否实现后台定位 ✅ ...
css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素): 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印 ...
Discuz!X论坛开发(九)二次开发之Discuz X2 文件目录功能详解
原文链接: http://www.discuz.net/forum.php?mod=viewthread&tid=2359270&reltid=1625972&pre_thre ...
Android开发之Activity的生命周期详解
Android生命周期分为两部分: (1)典型情况下的生命周期. (2)异常情况下的生命周期. 典型情况下的生命周期分析图1 Activity的生命周期图解图2 Activity生命周期的金字 ...
android开发之eclipse调试debug模式详解
之前我写了一个相关的帖子,但是今天看了一个还是写的比我详细,于是我拿过来和大家分享. 1.在程序中添加一个断点如果所示:在Eclipse中添加了一个程序断点在Eclipse中一共有三种添加断 ...
unturned服务器配置文件,《Unturned》使用Bottle开3.0服务器方法图文详解
<Unturned>使用Bottle开3.0服务器方法图文详解 2015-02-03 17:04:07来源:贴吧编辑:评论(0) <Unturned>游戏中玩家们可以联机作战, ...
Android Studio打不开虚拟机，两种情况详解
Android Studio打不开虚拟机,两种情况详解文章目录 Android Studio打不开虚拟机,两种情况详解 1.VT-x is disabled in BIOS 2.Emulator文件 ...
web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！
原创 2017-03-08 web小二 web前端开发作为一名前端开发人员,css中的长度单位,都是我们在工作中非常熟悉的名词,因为没有它们,我们就不能声明某个字符应该多大,或者某些图像周围应该留白 ...
vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw
作为一名前端开发,在做移动端适配时rem.vw是我们经常用到的单位,但是我们在实际开发过程中需要将设计稿上的px转换成rem,如果手动去计算,将是一个很耗时.费力的过程.这是就需要一个工具可以帮我们自 ...
移动端开发之Web App开发
写在前面:本人刚刚接触移动端开发,希望自己的见解能够帮助到他人,不足之处还望提醒. 1 移动端开发分类 1.1 Native App 原生App开发优点: (1)用户体验好 (2)性能稳定 (3)操 ...

移动端开发之px，em和rem详解

移动端开发之px，em和rem详解相关推荐

最新文章

热门文章