最近在做移动端的项目,为了移动端的适配,上网搜了一下,发现了一套可用方案,亲测有效哦
配方 lib-flexible + postcss-pxtorem
- lib-flexible 用于设置 rem 基准值
flexible.js手淘框架,是一个用来适配移动端的js框架。
手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了。 - postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
实际开发中,我们通过设计稿得到的值单位是 px,所以要将 px 转换成 rem 再写进样式中。
将 px 转换成 rem 我们将使用 postcss-pxtorem这个工具。
1. 在命令行中运行如下安装:
npm i lib-flexible --save
npm i postcss-pxtorem -save
2. 在main.js中引入lib-flexible
import 'lib-flexible'
3. 在index.html中引入:移动适配meta标签(一般编辑器自动生成)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4. 更改配置
在 build/util.js 中 按如下两更改
(1)将px2rem-loader添加到cssLoaders中
const px2remLoader = {
loader: 'px2rem-loader',
options: {
//一般设置75
remUnit: 37.5 //设计稿宽度/10; 37.5按照375设计图尺寸在设计,75安装750设计图尺寸设计
}
}
(2)在generateLoaders方法中添加px2remLoader
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
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
5.重启
npm run dev
- 重启项目,会发现自己设置的px被转为rem 了
- 但是有一定的局限性
- 以上实现转换适用于:
(1)组件中编写的下的css
(2)从index.js或者main.js中import ‘…/…/static/css/reset.css’引入css
(3)在组件的中引入css
另外的情况不适用:
(1)组件中@import “…/…/static/css/reset.css (可考虑上面(2)、(3)的形式引入)
(2)外部样式:
(3)元素内部样式:style=”height: 417px; width: 550px;”
另外我要补充的是:在做移动端适配的时候我们不建议给字体也设置rem的单位,针对这种情况,我为字体适配的解决方案是使用媒体查询,文件以组件中@import “…/…/static/css/reset.css形式引入,可完美解决移动端适配问题