前言根据 W3C 规范中对 1rem 的定义：1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。这就意味着 1rem 等于 html 元素的字体大小（大部分浏览器根元素的字体大小为16px）兼容性ios：6.1系统以上都支持android：2.1系统以上都支持大部分主流浏览器都支持，可以安心的往下看了。rem：（font size of the root element）意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的，举一个简单的例子，现在大部分浏览器IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px，即html { font-size:16px;} 那么如果我们想给一个P标签设置12px的字体大小，那么用rem来写就是p { font-size: 0.75rem; //12÷16=0.75（rem）}使用rem这个字体单位进行适配，就是利用它作为一个全局字体固定参照单位的特性。如果改变html元素的字体大小，rem的值也就跟着改变，对应的其他使用rem的布局尺寸，也会跟着改变，从而达到适配的目的，保证比例一致。 所以rem不仅可以适用于字体，同样可以用于width height margin这些样式的单位。rem适配具体实现方案：设计稿尺寸宽度为750px，如果设计稿是640px，下边js会自动计算rem的值（比如rem:75px -> rem: 64px），具体的尺寸rem不用调整（例如 padding: 1.5rem，不用调整，这是一个比例大小），对应的元素大小px值会根据新的rem（比如rem: 64px, padding等于 1.5 * 64）改变，从而按照比例适配。index.html<!DOCTYPE html><html lang=“en”> <head> <meta charset=“utf-8”> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> <title>rem适配</title> <script>;(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’] = {}));</script> </head> <body> <noscript> <strong>We’re sorry but rem适配 doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id=“app”></div> <!– built files will be auto injected –> </body></html>helper.scss$remBase: 75;$primaryColor: #ffd633;@function px2rem($px) { @return ($px / $remBase) * 1rem;}%textOverflow { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}// @include borderLineTop(’top’, color)@mixin borderLine($mode: ’top’, $color: #e5e5e5) { position: relative; @if $mode == ’top’ { &::before { // 实现1物理像素的下边框线 content: ‘’; position: absolute; z-index: 1; pointer-events: none; background-color: $color; height: 1px; left: 0; right: 0; top: 0; @media only screen and (-webkit-min-device-pixel-ratio: 2) { -webkit-transform: scaleY(0.5); -webkit-transform-origin: 50% 0%; } } } @if $mode == ‘bottom’ { &::after { // 实现1物理像素的下边框线 content: ‘’; position: absolute; z-index: 1; pointer-events: none; background-color: $color; height: 1px; left: 0; right: 0; bottom: 0; @media only screen and (-webkit-min-device-pixel-ratio: 2) { -webkit-transform: scaleY(0.5); -webkit-transform-origin: 50% 0%; } } }}@mixin borderRadius($radius) { border-top-left-radius: px2rem($radius); border-top-right-radius: px2rem($radius); border-bottom-left-radius: px2rem($radius); border-bottom-right-radius: px2rem($radius);}// @include banner(100)@mixin banner($height) { position: relative; padding-top: percentage($height/750); // 使用padding-top height: 0; overflow: hidden; img { width: 100%; height: auto; position: absolute; left: 0; top: 0; }}$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 100);$sides: (top, bottom, left, right);@each $space in $spaceamounts { @each $side in $sides { .m-#{str-slice($side, 0, 1)}-#{$space} { margin-#{$side}: #{px2rem($space)} !important; } .p-#{str-slice($side, 0, 1)}-#{$space} { padding-#{$side}: #{px2rem($space)} !important; } }}.flex-center { display: flex; align-items: center;}@mixin font-dpr($font-size){ font-size: $font-size; [data-dpr=“2”] & { font-size: $font-size * 2; } [data-dpr=“3”] & { font-size: $font-size * 3; }}App.vue, 使用px2rem进行转换<style lang=“scss”>@import “@/assets/style/helper.scss”;#nav { padding: px2rem(24); a { font-size: px2rem(24); font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } }}</style>
...