首页分享 rem、px、em(手机端h5页面屏幕适配的几种方法）

rem、px、em(手机端h5页面屏幕适配的几种方法）

来源：花匠小妙招时间：2024-12-07 18:35

px像素（pixel）：相对长度单位。相对于显示器屏幕分辨率而言。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。那么你在body里字体大小就是1em=8px了。可当你定义了一个div，然后把字体设置成了75%，请问，现在的1em等于多少？这个时候你会发现，原来他继承了body的值，现在字体更小了，变成了6px！因为em是相对于父节点的单位。这么嵌套下去你会哭…(幸好出现了rem╭(′▽)╭(′▽)╯)

rem

相对长度单位，指相对于根元素的字体大小的单位。rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视。

屏幕适配的几种方法（流式布局、固定宽度、响应式、通过viewport进行缩放、使用rem）流式布局：

在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

固定宽度：

把页面设置成320的宽度，超出部分留白，这样做视觉，前端设计都挺挺开心，UI再也不用被流式布局限制自己的设计灵感了，前端也不用流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小。

响应式：

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性
难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样
反而可以节约成本，不用再专门为自己的网站做一个web app的版本。

rem等比例适配所有屏幕：开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）开始开发，对设计稿的标注进行转换对于需要等比缩放的元素，CSS使用转换后的单位对于不需要缩放的元素，比如边框阴影，使用固定单位px

假设设计稿的某个字体大小是 40px, 手机屏幕上的字体大小应为 420/750*40 = 22.4px (体验好)，换算成 rem（相对于 html 根节点，假设 html 的 font-size = 100px,）则这个字体大小为 0.224 rem

写样式时，对应的字体设置为 0.224 rem 即可，其他元素尺寸也做换算…

但是有问题

举个，设计稿的标注是40px，写页面时还得去做计算，很麻烦（全部都要计算）

能不能规定一下，看到 40px ,就应该写 40/100 = 0.4 rem,这样看到就知道写多少了（不用计算），此时的 html 的 font-size 就不能是 100px 了，应该为 (420*100)/750 = 56px，100为我们要规定的那个参数

根据不同屏幕宽度，设置 html 的 font-size 值

<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> <script> const WIDTH = 750 //设计稿尺寸 const setView = () => { document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px' } window.onorientationchange = setView setView() </script> </head> 1234567891011

对于需要等比缩放的元素，CSS使用转换后的单位

header { font-size: .28rem; } 123

对于不需要缩放的元素，比如边框阴影，使用固定单位px

header > span.active { color: #fff; border-bottom: 2px solid rgba(255, 255, 255, 0.3); } 1234

假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值）做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些。
参考资料：
移动端适配的几种方案