您现在的位置是：亿华云 > 系统运维
关于 Rem 的适配！前端页面响应式开发必备技巧
亿华云2025-10-02 21:10:13【系统运维】5人已围观
简介本文转载自微信公众号「零零后程序员小三」，作者003 。转载本文请联系零零后程序员小三公众号。哈喽大家好我是小三，作为全栈工程师当然是要了解前端的东西。最近学到了rem，分享下学习的心得。我们作为前端
本文转载自微信公众号「零零后程序员小三」，关于作者003 。适配式开转载本文请联系零零后程序员小三公众号。前端巧
哈喽大家好我是页面小三，作为全栈工程师当然是发必要了解前端的东西。最近学到了rem，备技分享下学习的关于心得。
我们作为前端初学者来说，适配式开是前端巧不是有一个疑惑，我们电脑屏幕大，页面但是发必手机屏幕小，那我在PC端页面写好的备技东西到了手机端岂不是很难看?
所以!我在这里将会给你们介绍关于rem的适配方案
关于rem的适配方案?
「适配的目的是什么?」 「原理是什么」 「怎么做?」带着这三个疑问，我们一起来看看rem
适配的关于目的是什么?
肯定是为了适应在不同的设备下，我们写出来的服务器租用适配式开效果差别不大，如果我们只按照PC端来开发，前端巧如果用户用手机打开这个页面，那肯定是用起来很难受。
而且，如果我们为了去适配某一台手机，而再去写一个样式，那岂不是工作量更大，更何况市面上的手机品类这么多，屏幕大小不一，什么刘海屏什么的，那工作量可想而知!
原理是什么
我们这就来看看。实现rem的原理是什么?
「一. 根据UI给我们的设计稿与设备宽度的大小比例，动态的计算然后去设置html的字体大小(font-size);然后页面大小根据一个公式去规范元素的大小」
「二. 根据设计稿元素的宽，高的取值，根据同比例换算为rem单位的值」
怎么做?
首先，我们以iphone6为例子，因为我们常用开发都是云南idc服务商以iphone6作为移动端的例子来换算，这里为什么就需要您们自己去百度了。
less + @media(媒体查询) + rem
我们假设UI给我们的设计稿是750px的，然后呢我们把屏幕划分为15等份(看个人需求，15到20等份也是可以的)，然后每一份作为HTML的文字大小，然后750除以15也就是50px，那么当我们在宽度为375px的设备的时候，字体大小的换算就是375除上15等分，算出结果25px，然后用页面元素的大小除以不同HTML字体大小，你会发现比例还是一样的，
比如一个100乘100像素大小的盒子在750屏幕下，就是100除以50转换为rem的话是2rem乘2rem，高防服务器
再比如，当我们想在375的屏幕下画一个100px的盒子，那就是4rem乘4rem
然后我们看看代码
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @media screen and (min-width: 375px) { html { font-size: 25px; } } @media screen and (min-width: 750px) { html { font-size: 50px; } } .box1 { width: 2rem; height: 2rem; background-color: green; } .box2 { width: 4rem; height: 4rem; background-color: skyblue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>我们先看看750屏幕
再看看375的移动端
然后可以发现
100乘100 px元素在750屏幕下 就是100/50 转换为rem 是2rem2rem 比例是 1比1
375屏幕下 html字体大小为25 则2rem=50px 此时宽和高都是50 但比例还是1比1
最后得出公式：
设计稿宽值也就是页面元素值=A =>(已知)
html的字体大小值=B
划分的份数=C =>(已知)
rem的值 = X
X = A / B / C
B = A / C
@media +flexble.js + rem
使用flexible.js能轻松搞定各种不同的移动端设备兼容自适应问题。
用起来也是特别的简单，我们只需要引入这个东西，原理还是将设备划分等份 不同的设备 比例还是一致的
然后自己需求设置屏幕大小，我的是这样的
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <scri src="./flexible/flexible.js"></script> <style> @media screen and (min-width: 375px) { html { font-size: 25px; } } @media screen and (min-width: 750px) { html { font-size: 50px; } } div { width: 2rem; height: 2rem; background-color: rgb(247, 5, 5); } </style> </head> <body> <div></div> </body>下面是我去网上查找到的js文件，需要的可以自行下载使用
(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector(meta[name="viewport"]); var flexibleEl = doc.querySelector(meta[name="flexible"]); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = { }); if (metaEl) { console.warn(将根据已有的meta标签来设置缩放比例); var match = metaEl.getAttribute(content).match(/initial-scale=([\d.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { var content = flexibleEl.getAttribute(content); if (content) { var initialDpr = content.match(/initial-dpr=([\d.]+)/); var maximumDpr = content.match(/maximum-dpr=([\d.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; } } else { // 其他设备下，仍旧使用1倍的方案 dpr = 1; } scale = 1 / dpr; } docEl.setAttribute(data-dpr, dpr); if (!metaEl) { metaEl = doc.createElement(meta); metaEl.setAttribute(name, viewport); metaEl.setAttribute(content, initial-scale= + scale + , maximum-scale= + scale + , minimum-scale= + scale + , user-scalable=no); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement(div); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + px; flexible.rem = win.rem = rem; } win.addEventListener(resize, function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener(pageshow, function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === complete) { doc.body.style.fontSize = 12 * dpr + px; } else { doc.addEventListener(DOMContentLoaded, function(e) { doc.body.style.fontSize = 12 * dpr + px; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === string && d.match(/rem$/)) { val += px; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === string && d.match(/px$/)) { val += rem; } return val; } })(window, window[lib] || (window[lib] = { }));很赞哦!（17）
