1.rem搭配CSS预处理器使用
这里我就用vue+less来简单操作一下，具体可以封装到底层，这里暂且演示一下原理。
这里推荐一下使用我的自制脚手架 (songyao-cli) 来快速生成一个vue项目，安装完依赖后，开始配置less.
/rem.less/
@device-width: 375; /设备布局视口/
@rem: (@device-width/10rem);
复制代码
然后将@rem配置成less全局变量
//vue.config.js
module.exports = {
css: {
loaderOptions:{
less: {
additionalData: @import '~@/static/rem.less';
}
}
}
}
复制代码
在vue的入口文件配置计算rem的方法
// toRem.js
export default function() {
const root = document.documentElement;
/** 以iPhone6为例：布局视口为375px，我们把它分成10份，则1rem = 37.5px，
* 这时UI给定一个元素的宽为375px（设备独立像素），
* 我们只需要将它设置为375 / 37.5 = 10rem。
*/
const scale = root.clientWidth / 10
root.style.fontSize = scale + 'px'
}
//main.js
import Vue from 'vue'
import App from './App.vue'
import toRem from "./utils/toRem" //
toRem()
window.addEventListener('resize', toRem)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
复制代码
然后就可以在vue中使用全局变量@rem进行移动端开发了
{{ username }}
了解脚手架及脚手架指令请移步个人博客
check out the
逐梦博客.
微信公众号：前端南玖
.songyao { }
复制代码
作者：南玖
链接：https://juejin.cn/post/7085931616136069156
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
1.vw、vh适配
vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3中提出来的，基于视图窗口的单位。
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
上面的flexible方案就是模仿这种方案，因为早些时候vw还没有得到很好的兼容。
vw(Viewport's width)：1vw等于视觉视口的1%
vh(Viewport's height) :1vh 为视觉视口高度的1%
vmin : vw 和 vh 中的较小值
vmax : 选取 vw 和 vh 中的较大值
如果按视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 3.75 = 20vw。
这里我们同样可以借助less来实现，不用自己去手动算，算的过程我们交给less就好了，我们直接按照设计稿上去开发就行
// 还是rem.less 我们加一个@vw变量
@device-width: 375;
@rem: (@device-width/10rem);
@vw: (100vw/@device-width);
复制代码
{{ username }}
了解脚手架及脚手架指令请移步个人博客
check out the
逐梦博客.
微信公众号：前端南玖
.songyao { }
