html手机网页适配 rem,移动端网页布局适配rem方案小结
前言
根据 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
rem适配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'] = {}));
We're sorry but rem适配 doesn't work properly without JavaScript enabled. Please enable it to continue.
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进行转换
@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;
}
}
}
