1.js 原生
;(function(win, doc) {
change()
function change() {
var remSize = window.innerWidth / 7.5 || 50 /*设计稿是以width = 750px 为基准的*/
document.querySelector('html').style.fontSize = (remSize > 100 ? 100 : remSize) + 'px'
}
win.addEventListener('resize', change, false)
win.addEventListener(
'orientationchange',
change,
false
) /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
})(window, document)
这个在vue项目中也可使用,直接在主入口文件index.html中写入,或者你可以将其封装为一个js方法,在mian.js文中引入
import 'XX.js' /*必须放在最前面引入*/
2.使用插件 lib-flexible
1.安装插件 lib-flexible
npm i lib-flexible --save
2 .在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3 .安装px2rem loader
npm install px2rem-loader
4 .配置px2rem-loader
在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
我之前将这个配置错写为
const px2remLoader = {
loader: 'px2rem-loader',
options: 75
}
结果报错为:
同时,在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
5.此时配置已经完成,接下来看看使用
在这里,我们设置了一个div的宽度是200px,
使用 lib-flexible 插件遇到的问题
1,如果你在375屏幕之下 html的data-dpr 使用值为1,检查你html的头部是否添加了
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
在使用这个插件的时候,不需要加
<meta name="viewport"> 插件会自动给你添加上
2.如果你给div 设置样式
div{
width:200px;
height:200px;
border:1px solid red;
}
你会发现在经过了px->rem->px这个过程中,将div的大小包含了border的width ,div的width变成了102px;