在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem。
注意:适配对于浏览器视口小的友好,视口大的话,也许一个轮播图就占据 2 屏了
vue-cli:使用脚手架工具创建项目。
适配方法1
postcss-pxtorem:转换 px 为 rem 的插件。
- 创建 rem.js 文件
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。(简单的说 750 是设计稿的宽度)
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
- 在 main.js 中引入 rem.js
import './utils/rem' // 引入时,需要注意路径
- 安装 postcss-pxtorem
npm install postcss-pxtorem -D
- 修改根目录 .postcssrc.js 文件,找到 plugins 属性新增pxtorem的设置
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
注意:此方法支持 import 和 .vue 单文件中 style。暂不支持 style 中使用 @import url();
适配方法2
- 下载lib-flexible
npm install lib-flexible --save
- 在 main.js 中引入 lib-flexible
import 'lib-flexible/flexible'
- 在 index.html 添加 meta 标签
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 安装 px2rem-loader,使用flexible插件时,会自动把px转换成rem单位
npm install px2rem-loader
- 在 build 文件夹中找到 util.js ,将 px2rem-loader 添加到 cssLoaders 中
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
//一般设置75
remUnit: 75
}
}
我们只需要在 cssLoader 后面加上一个 px2remLoader 即可,px2rem-loader 的 remUnit 选项意思是 1rem=多少像素,结合 lib-flexible,我们将 px2remLoader 的 option.remUnit 设置成设计稿宽度的1/10,这里我们假设设计稿的宽度为750px,那么 px2remLoader 中的 remUnit 的值为75
- 在 generateLoaders 方法中添加 px2remLoader
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
// 这里不管真假,都增加了 px2remLoader
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
适配方法3
- 假如设计图宽度是 750
!(function (doc, win) {
// 拿到html标签的dom元素对象
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function () {
// 拿到当前屏幕的尺寸。
var width = docEle.clientWidth;
width = width < 320 ? 320 : width;
width = width > 640 ? 640 : width;
width && (docEle.style.fontSize = 100 * (width / 750) + "px");
setTimeout(function() {
var width = docEle.clientWidth;
width = width < 320 ? 320 : width;
width = width > 640 ? 640 : width;
width && (docEle.style.fontSize = 100 * (width / 750) + "px");
}, 300);
};
win.addEventListener(evt, fn, false);//监听横屏
doc.addEventListener("DOMContentLoaded", fn, false);
- 引入 js 文件,在 scss 或 less 文件中长度单位直接使用 rem。比如
height: 200/100rem;