摘要：有与两种方式来调整元素大小的值。如果你的页面还需要适配到端，那么就老老实实的使用吧。在上面的实现中，我通过判断设定了字体大小的范围来避免上显示过于夸张。二有的同学可能对的适配有点误解。
最近看到这样一个提问：我有一个750 x 1500尺寸的设计稿，设计稿上有一个150 x 50的按钮，那么在写页面布局的时候，应该如何确定按钮的尺寸呢？。大多数同学在回答的时候提到了rem。但我发现很多同学对于rem的实际应用还存在一点小小的疑问和误解。
于是问题来了，rem到底是什么？rem是为了解决什么问题而存在的？rem能够给我们带来什么样的便利？带着这样的问题，我们一起来总结一下rem的实践。刚好工作中有一个移动端页面的需求要做，就尝试使用rem完成了一个小小的页面适配。大家可以点击这里，查看rem适配demo，
建议大家在chrome的device module下打开，通过切换不同手机的模拟器来查看不同尺寸下的区别。
rem是一个相对于根元素字体大小的css单位。与px一样，他可以用来设置字体大小，也可以用来设置长度单位。相对于根元素字体大小是什么意思？
举个栗子。在页面中，html元素是根元素，因此我们首先给html设置一个字体大小
html { font-size: 100px; }
于是，在整个页面中，就有这样的换算公式 ： 1rem = 100px
所以如果一个按钮，有如下的css样式，就等同于他的宽为100px，高50px.
btn { width: 1rem; height: 0.5rem; }
这就是rem这个知识点的所有真相了。
！！！什么？这就完了？这和px有什么区别？
对啊，这和px本来就没有特别的区别，就是一个尺寸单位嘛！
所以提问的那个同学拿着750x1500设计图来问，当我们设置为html的字体大小为100px时，
150x50的按钮应该在页面里面写什么尺寸？，用px就应该写 75x25，用rem就是 0.75 x 0.25.
真实宽度375px / 设计图宽度750px = 按钮真实宽度 / 设计图按钮宽度150px ==> 按钮真实宽度 = 75px 又 1rem = 100px; ==> 75px = 0.75rem
有的时候我们希望在设计图直接量出来的尺寸不用除2直接得到rem的值，也就是说量出来是150px，那么用rem表示就是1.5rem。这个时候我们只需要修改html的字体大小为50px即可。那么计算思路就有一点不同。
真实宽度375px / 设计图宽度750px = 按钮真实宽度 / 设计图按钮宽度150px ==> 按钮真实宽度 = 75px 又 1rem = 50px; ==> 75px = 1.5rem
因此当设计图的尺寸发生改变时，我们需要根据上述思路，动态的调整html的字体大小，以达到我们想要的rem换算。
以iphone各种手机的尺寸来说，iPhone4,5 宽度320px，iPhone6 375px，iPhone6 plus 414px. 如果一个按钮，固定一个75x25的尺寸，那么就必然会导致在不同尺寸下的相对大小不一样。这带来的问题就在于会直接影响到设计的美观，可能在iPhone6下，一个完美的设计图，到了iPhone5,就变得low很多。 因为，为了让页面元素的尺寸能够在设备宽度变化的时候也跟着变化，rem就出现了。
我们已经知道，rem的相对大小跟html元素的字体大小有关系。使用rem适配的原理就是我们只需要在设备宽度大小变化的时候，调整html的字体大小，那么页面上所有使用rem单位的元素都会相应的变化。 这也是rem与px最大的区别。
有css与js两种方式来调整html元素大小的值。
css方式
html { font-size: calc(100vw / 3.75) }
100vw表示设备宽度，除以3.75这里是以iphone6 的宽度375px为标准，为了保证html的字体大小为100px。这样我们在换算的时候，1px 就是0.01rem，就很容易计算。
因为chrome下最小字体大小为12px，所以不能把html的font-size设置成1px或者10px，100px是我们最好的选择。
js方式， 原理与css一样，不过为了避免在一些老旧一点的手机浏览器上不支持calc，vm这些属性，在实际应用中使用js是最好的。
!function () {
function a() {
var _width;
var clientWidth = document.documentElement.clientWidth;
if (clientWidth > 568) {
_width = 568;
} else if (clientWidth < 320) {
_width = 320;
} else {
_width = clientWidth;
}
// var pageWid = (window.innerWidth > document.querySelector("body").offsetHeight) ? 1136 : 640;
document.documentElement.style.fontSize = _width / 375 * 100 + "px";
}
var b = null;
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener("resize", function () {
clearTimeout(b);
b = setTimeout(a, 300)
}, !1);
a()
}, false);
}(window);
在实践中还有一个关键的问题需要处理。就是无论如何js的加载会比css慢，因此如果我们就这样的话，页面的元素会有一个很明显的闪烁过程，因为再js加载进来之前，html的字体大小还没有达到我们想要的效果。因此通常我们需要在css中，给html的字体大小设置一个默认值，以弱化这个闪烁的过程。默认值的具体大小需要我们自行根据设计图的尺寸，以及你想要的结果，通过上面我们介绍的计算思路去得出。
html {
font-size: 100px;
}
一、rem的适用性很有局限，仅仅只能够用于只在移动端展示的页面。如果你的页面还需要适配到pc端，那么就老老实实的使用px吧。在上面的实现中，我通过判断设定了html字体大小的范围来避免pc上显示过于夸张。
二、有的同学可能对web的适配有点误解。web中做适配并不需要考虑什么物理像素啊，dpi等等概念。这些应该仅仅只是Android或者ios原生app才会考虑的问题。这些误会导致许多搞设计的同学在给web app做设计的时候，也丢一张1080 x 1920 的设计稿过来，真是愁死人了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115269.html
摘要：有与两种方式来调整元素大小的值。如果你的页面还需要适配到端，那么就老老实实的使用吧。在上面的实现中，我通过判断设定了字体大小的范围来避免上显示过于夸张。二有的同学可能对的适配有点误解。 最近看到这样一个提问：我有一个750 x 1500尺寸的设计稿，设计稿上有一个150 x 50的按钮，那么在写页面布局的时候，应该如何确定按钮的尺寸呢？。大多数同学在回答的时候提到了rem。但我发现很多...
摘要：有与两种方式来调整元素大小的值。如果你的页面还需要适配到端，那么就老老实实的使用吧。在上面的实现中，我通过判断设定了字体大小的范围来避免上显示过于夸张。二有的同学可能对的适配有点误解。 最近看到这样一个提问：我有一个750 x 1500尺寸的设计稿，设计稿上有一个150 x 50的按钮，那么在写页面布局的时候，应该如何确定按钮的尺寸呢？。大多数同学在回答的时候提到了rem。但我发现很多...
摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题 在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...
阅读 1950·2023-04-25 16:53
阅读 1416·2021-10-13 09:39
阅读 584·2021-09-08 09:35
阅读 1588·2019-08-30 13:03
阅读 2096·2019-08-30 11:06
阅读 1763·2019-08-30 10:59
阅读 3165·2019-08-29 17:00
阅读 2229·2019-08-23 17:55
