vue移动端适配方案flexible+px2remLoader使用指南及踩坑
根据移动端不同的dpr来做适配是非常必要的,很多时候前端开发对UI设计稿都是凭感觉来做,导致编译完的页面与设计稿或多或少有些出入 。
造成这种现象就是因为开发人员可能对移动端适配的不重视,为了能够完全按照设计稿的标注来实现,我们接下来介绍一下在vue平台下基于flexible和px2rem-loader的移动端适配方案。
1.安装flexible及引用
代码
.
//安装
npm install lib-flexible --save
//在入口js中引用
import 'lib-flexible'
2.安装px2rem-loader
px2rem-loader是px转换rem的工具
代码
.
//安装
npm install px2rem-loader --save
3.配置px2rem-loader
有几处文件需要配置
首先是,vue-cli生成文件中的build/utils.js
代码
.
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
importLoaders:15
}
}
//增加代码,px转rem配置
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 72 //根据视觉稿,rem为px的十分之一,720宽度px 72rem
}
}
此处需要注意的是px2remloader的remUnit属性,此处填写的是设计稿宽度的十分之一,例如设计稿宽度是720,这里填写72
同样还是utils.js文件,讲px2remLoader添加进loaders数组中
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
启动项目,愉快的按照设计稿用px来写页面了。
4.使用方法及我遇到的几个坑
1.按照px来编写都会转化成rem的形式,但是有些地方我们不想转换,可以用下面两种方法。
在px后面添加
/*no*/
,不会转化px,会原样输出。 — 一般border需用这个
在px后面添加/*px*/
,会根据dpr的不同,生成三套代码。---- 一般字体需用这个
2.使用过程中,发现某些import外联样式不会被转化,注意避开这些坑。
<style src='../assets/style.css'>
/* px2rem能正常转换 */
</style>
<style>
/* px2rem不能正常转换 */
@import '../assets/style.css';
</style>
<style>
/* px2rem不能正常转换 */
@import url('../assets/style.css');
</style>
3.无需自己增加html页面name=viewport的meta元标签。flexible会自动添加。