总结备忘一下之前移动端项目宽度自适应的方案。
之前没接触过手淘 flexible 的伙伴可以先看一下大漠老师的这篇文章,这样你会知道为什么长度用 rem
,字体用 px
。
使用 lib-flexible
- 安装 flexible
npm install lib-flexible -D
- 引入 flexible
在入口文件 main.js 中直接引入
import 'lib-flexible'
px 转 rem
之前看过很多网上的答案,都是使用插件 px2rem-loader
实现 px 自动转换 rem。
不过这个插件并不能转换第三方UI样式,如果你的项目没有引入第三方UI,可以使用这个插件。
px2rem-loader
- 安装 px2rem-loader
npm install px2rem-loader -D
- 配置 px2rem-loader
在 build/utils.js 中,修改cssLoader配置:
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
importLoaders: 2 // 在css-loader前应用的loader数目,默认为0
// 如果不加入这个,通过@import加入的css外部文件将不能正常转换。
// 如果你的项目还有应用其他loader,请加大数字
}
}
const px2remLoader = {
loader: 'px2rem-loader',
option: {
remUnit: 75 // 设计稿的1/10,一般移动端设计稿为750px
}
}
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
})
})
}
// .......
}
- px2rem 用法
直接写px,编译后会直接转换成 rem。
在px后面加 /*no*/
,不会转换px,会原样输出,一般border需要用这个规则。
在px后面加 /*px*/
,会根据dpr的不同,自动生成三套方案,用于字体大小设置。
示例:
.box {
width: 150px;
font-size: 28px; /*px*/
border: 1px solid #eee; /*no*/
}
编译后:
.box {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
font-size: 14px;
}
[data-dpr="2"] .selector {
font-size: 28px;
}
[data-dpr="3"] .selector {
font-size: 42px;
}
注意点:
- 完成配置后注意重启项目
- 不需要在 index.html 的头部加
<meta>
postcss-px2rem-exclude
如果你的项目需要引入第三方UI框架,那就不能使用 px2rem-loader。
因为第三方ui框架的css是基于data-dpr为1的时候所编写,所以只要不转换框架的css样式就可以了。
postcss-px2rem-exclude 插件可以设置不转换的文件。
- 卸载冲突插件
如果项目中存在 px2rem-loader、postcss-px2rem,先卸载掉,不然插件不会生效。(不要忘了把之前的配置也删除)
- 安装 postcss-px2rem-exclude
npm install postcss-px2rem-exclude -D
- 配置 postcss-px2rem-exclude
在.postcssrc.js 文件中添加如下代码
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px2rem-exclude': {
// 添加的代码
remUnit: 75,
exclude: /node_modules|folder_name/i
// 正则,忽略node_modules目录下的文件
}
}
}
如果你的项目没有生成这个独立文件,就需要在你的package.json里设置。
"postcss": {
"plugins": {
"autoprefixer": {},
'postcss-px2rem-exclude': {
"remUnit": 75,
"exclude": "/node_modules|folder_name/i"
}
}
}
Tips:
在iOS中可能会遇到点击输入框,页面放大的问题,可以在 index.html 加入meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />