那么son的字号就是2*20px=40px，此时如果father的字号改变了，那么son的字号也会改变。如果没有父元素，则以body为基准（因为默认浏览器默认字体是16px，所以默认是1em=16px）。rem：相对于html根元素字体大小的倍数，和上面bodybenchmark的解释类似。默认情况下，1rem=16px。此时，只要根元素的字体大小不变，相对于它的rem就不会改变。对于各种机型的移动端，由于不同机型的屏幕尺寸和分辨率不同，不可能以相同的根元素字体大小为基准，所以所谓rem布局就是动态计算不同的布局通过js建模。模型根元素的字体大小值用于按比例缩放页面，以达到适配大多数模型的效果。那么你如何着手设定这个基准呢？假设将手机的屏幕宽度分成10等份（因为rem布局设置的是宽度），指定一份为根元素的font-size值，则根元素的font-size值根元素可以通过以下公式确定得到：document.documentElement.style.fontSize=document.documentElement.clientWidth/10+'px';在这个benchmark下，也得到了1rem的值：1rem=document.documentElementstyle..fontSize=document.documentElement。clientWidth/10+'px';然后，由于不同屏幕型号的屏幕宽度不同，得到rem在标准“屏幕宽度被分成10等份”下的相对值。更完整的计算方法如下：//set1rem=viewWidth/10functionsetRemUnit(){varrem=docEl.clientWidth/10docEl.style.fontSize=rem+'px'}setRemUnit()//resetremunitonpageresizewindow.addEventListener('resize',setRemUnit)window.addEventListener('pageshow',function(e){if(e.persisted){setRemUnit()}})注意：这里标准的“10”可以是任意值，只要与后面换算公式中使用的标准值一致即可，此处设置只是为了计算方便。这样就搭建好了rem的基础生态。那么如何应用到基于这套标准的开发中呢？在继续之前，先了解一下“像素”的知识点，因为后面会用到它的概念。像素分为两种：设备像素和CSS像素1.设备无关像素：设备屏幕的物理像素。任何设备的物理像素数都是固定的。2.CSS像素（CSSpixels）：也称为Logicalpixels，为web开发者创建，是CSS和javascript中使用的一个抽象层。在PC端，CSS像素与物理像素的关系是1:1；在移动端，由于各种类似于视网膜屏幕的高清图像的出现，CSS像素与物理像素的关系一般为1:2或1:3，即1个CSS像素包含2~3个物理像素像素达到高清效果。一般移动端页面的开发流程是：设计者以一定的模型为标准来设计UI。前端开发针对该机型的UI进行开发，然后其他机型相对按比例缩放。这里以iphone6为标准（因为实际开发中基本都是用来设计的），它的物理像素是750x1334，css像素是375*667。假设UI上图片a的宽度为140，如何转换为rem单位值呢？现在已知屏幕宽度为10rem，要求UI上的rem值为140，假设为X，由下图很容易得到比例关系：屏幕宽度/UI宽度=x/140=10rem/750=》x=140/750*10rem在sass中一般可以通过封装预处理函数来完成这个转换过程：$UI_WIDTH:750;@functionpx2rem($px){@return${$px/$UI_WIDTH*10}rem;//=>或者@return${$px/75}rem;}img{width:px2rem(140);}这个就是“rem布局”原理的整个实现过程！随着社区各种工具的完善，已经不需要手动使用px2rem等预处理功能进行转换了。比较流行的方法是使用postcss的postcss-px2rem插件自动处理，开发的时候还是按照px的方式去编程，postcss配置示例：postcss:function(){return[px2rem({remUnit:75})];//设置基准值，75是iphone6的标准}这里的remUnit设置是有一定规律的，比如屏幕的宽度分为10份。当用iphone6设计UI时（即物理像素宽度为750），remUnit=75；当用iphone5设计UI时（即物理像素宽度为640），remUnit=64。可以看出，它遵循以下公式：remUnit=物理像素宽度/设置屏幕宽度均衡值；至于具体的js均衡逻辑包，请参考手机淘宝flexible。em还是rem？那么在实际开发中，到底em还是rem合适呢？只要记住以下原则：如果根据元素的font-size获取属性值，则使用em，padding、margin、line-height等使用rem。本文收录在我个人的Githubhttps:///github.com/kekobin/bl...，觉得有帮助，欢迎入手。支持原创，未经本人同意请勿转载！