一、背景
在使用 vue-cli 构建移动端项目的时候，移动端自适应应该是很常见的需求了，之前见过有直接在 html 文件head 标签内添加 rem 设置的，这里分享一下使用淘宝的 lib-flexible 和 px2rem-loader 配合 vue-cli 构建的项目配置移动端自适应。
话不多说，上方案，有问题希望大家多提问题和其他方案！！！！！
二、方案
方案一、rem + 根font-size设置
什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 视口宽度与设备宽度一样 禁止用户缩放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
// 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变
html,
body {
padding: 0;
margin: 0;
}
html {
font-size: 100px;
}
body {
font-size: 0.16rem;
}
</style>
</head>
<body>
<script>
var ScreenResize = {
designWidth: 1920,
designHeight: 1080,
minHeight: 768,
minWidth: 1280,
resize: function () {
scale: this.designWidth / this.designHeight;
var htmlWidth = Math.max(document.documentElement.clientWidth, ScreenResize.minWidth)
var htmlHeight = Math.max(document.documentElement.clientHeight, ScreenResize.minHeight);
document.documentElement.style.fontSize = (htmlHeight / (ScreenResize.designHeight / 100)) + "px";
document.documentElement.style.minHeight = ScreenResize.minHeight + "px";
document.documentElement.style.minWidth = ScreenResize.minWidth + "px";
document.documentElement.style.width = htmlWidth + "px";
document.documentElement.style.height = htmlHeight + "px";
}
};
ScreenResize.resize();
var throttle = function (func, delay) {
var timer = null;
var startTime = Date.now();
return function () {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
clearTimeout(timer);
if (remaining <= 0) {
func();
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
window.addEventListener('resize', throttle(() => ScreenResize.resize(), 1000));
</script>
<div>
内容
</div>
</body>
</html>
方案二
postcss-pxtorem 像素自动转换成rem
习惯了写px，所以也希望我在写px的时候能够主动转换成rem，使用 postcss-pxtorem就能实现我们的愿望
- 安装postcss-pxtorem
npm i postcss-pxtorem --save-dev
- 打开项目根目录下的package.json，在postcss的plugins里添加下面的代码
"postcss-pxtorem": {
"rootValue": 100,
"propList": [
"*"
]
}
方案三
在使用 vue-cli 构建移动端项目的时候
- 安装依赖
npm i lib-flexible px2rem-loader -S
- 引入 lib-flexible
在项目入口文件 main.js 中引入：
import 'lib-flexible'
- 添加 meta 标签（可选）
一般 vue-cli 构建的项目都是自动添加了移动端 meta 标签的，如果没有，在 index.html 文件的 head 标签内加上：
- 配置
在 vue-cli 生成的项目中，vue-loader 的 options 和其他样式文件的 loader 最终都是由 build/untils.js 文件里的一个方法生成，我们只需要在里面加上 px2rem-loader 就行：
打开 untils.js 文件：
在其中找到 cssLoaders 方法，在其中加上 px2rem-loader 的配置：
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
其中 remUnit:75 属性是指 1rem=75 像素的意思，因为 lib-flexible 是设定1rem为屏幕宽度的1/10，所以我们这应该将 remUnit 属性的值设置为设计稿的 1/10，我们这里假设使用标准稿宽为 750px，则 remUnit:75；
将 px2remLoader 放进 generateLoaders 数组：
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader];
// 如果使用 postcss 的话在 postcssLoader 后面也加上 px2remLoader
配置完成！
号外！
现在因为越来越多浏览器对 viewport 单位的兼容，lib-flexible 这个过渡方案存在一点问题，所以后期建议大家开始使用 viewport 来替代此方案，vw 的兼容方案可参阅 如何在Vue项目中使用vw实现移动端适配
扫一扫
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
