移动端rem适配方案
移动端适配经常使用的就是 rem; 主要有以下几种方案：
1：rem + 媒体查询（@media）
2：js + rem（查询屏幕宽度）
3：VW + rem（不需要查询屏幕宽度）
这几种方式最终css写的单位是 rem;
rem适配原理
rem是一个相对单位。
是相对于根元素html的font-size宽度值。大多数浏览器默认字体宽度是16px(如果没有设置过)，也就是 1rem = 16px;
如下图所示：
既然rem相对于根据html的font-size来的，那再不同的屏幕宽度时改变html的字体宽度值，那么rem的值也会相应的改变；这也就是为什么要频繁的改变html下面font-size值的原因；
方案1：rem+媒体查询
计算公式：当前屏幕宽度下的html字体值 = 当前屏幕宽度*预设字体值/psd设计稿的宽度(750px)
预设字体值可以随意设，计算方便我通常设置为100;
媒体查询适配模板
以下font-size的字体值是根据预设字体值 100;
common.css
/* 媒体查询适配模板 预设值为 100 */
@media screen and (min-width: 320px) {
html {
font-size: 42.667px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media screen and (min-width: 540px) {
html {
font-size: 72px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 100px;
}
}
在main.js引入
main.js
import Vue from 'vue'
import App from './App.vue'
// 引入适配css
import '@/assets/common.scss'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
使用：如果量得设计图其中一个元素的宽度是235px,那么在css代码中需要写成 :先除以预设值 再加上rem即可；如下：
.div{
width:2.35rem; // 235/100=2.35+rem
}
方案2：js+rem
这种方案也是阿里早期开源的一个[移动端适配]解决方案（flexible.js）；
原理是需要查询屏幕的宽度，只不过这种需要通过监听屏幕的尺寸变化 ，实时调用clientWidth方法获取屏幕宽度来更改html的字体值；
分析如下：
350：当前屏幕宽度（设备宽度） curScreenWidth
750：psd设计稿宽度 psdWidth
100：预设字体基础值 1rem = 100px preFontSize
x： 当前屏幕宽度字体的基础值（html的font-size的值）curFontSize
320 x
——— = ———
640 100
x = (320*100)/640 公式如下：
curFontSize=(curScreenWidth*100)/psdWidth
牢记公式： 当前屏幕宽度下的html字体值 = 当前屏幕宽度*预设字体值/psd设计稿的宽度(750px);
1，开始封装
autoSize.js
// 封装 rem + js 移动端适配方案
export function autoSize() {
//设计稿的宽度
var psdWidth = 750;
//预设字体值
var preFontSize = 100;
//当前屏幕宽度
var curScreenWidth = document.documentElement.clientWidth;
//当前屏幕对应的html字体值
var curFontSize = (curScreenWidth * preFontSize) / psdWidth;
//设备宽度在750px
if (curScreenWidth > 750) {
curScreenWidth = 750;
}
//把计算下来的当前屏幕html字体值 赋值给html元素 documentElement属性会获取到html根元素 然后为之设置字体值
document.documentElement.style.fontSize = curFontSize + "px";
}
2，vue 中使用 （resize方法监听窗口变化，实时计算html下面的font-size值）
App.vue
<template>
<div id="app">
</div>
</template>
<script>
import {
autoSize } from "@/assets/auto";
export default {
name: "App",
// 监听resize事件
mounted() {
window.addEventListener("resize", () => {
autoSize();
});
}
};
</script>
这种方法实际写入到css代码中还是：测量宽度/100 + rem；
方案3：vw+rem（不用查询屏幕宽度）
使用视口单位布局 (纯css) 实现动态改变font-size属性值，不需要引用js文件，但需要在meta标签添加viewport 属性；vue项目会自动添加；
Viewport 介绍：
vw：是css3规范中宽度视口单位，将视口宽度平均分成100份；
vh：将视口高度平均分成100份；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
属性说明：
width：控制 viewport 的大小，可以指定的一个值，如 device-width为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height：和 width 相对应，指定高度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例 float_value
minimum-scale：允许用户缩放到的最小比例 float_value
user-scalable：用户是否可以手动缩放 no表示不可以 yes为可以
视口布局原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位可知：
750px = 100vw ； 1px = 0.133333vw;
100px = 13.33333vw = 1rem;
px和rem关系还是100倍 ; 那么实际写入如到css代码中还是：测量宽度 / 100 + rem;
html {
font-size:13.33333vw; //100px=1rem = 13.33333vw
}
- 优点：页面元素随着页面宽度变化
- 缺点：
- 兼容性没有rem好 ,得大量计算， 不是很精确
- 转换后的长度单位不够直观修改维护困难