Open hubvue opened 5 years ago
移动端 webapp 场景下,由于需要适配各种大小不同的屏幕,可以采用 rem 方案。rem 是指 html 根节点的 font-size 大小。但是我们平常书写代码习惯使用 px 来写,因此就需要在工程化上将 px 来转换成 rem。
使用px2rem-loader可以在 webpack 构建过程中自动的将 px 转换成 rem。
px2rem-loader
yarn add px2rem-loader --dev
module.exports = { module: { rulse: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'px2rem-loader', options: { remUnit: 75, remPrecision: 6 } } ] } ] } }
除此之外,我们还需要根据手机屏幕的大小来动态的修改 html 节点的 font-size 大小。这里采用手淘的lib-flexible方案。
lib-flexible
安装
npm i -S amfe-flexible
在 html 的 head 标签内加入
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <script src="./node_modules/amfe-flexible/index.js"></script>
px2rem
移动端 webapp 场景下,由于需要适配各种大小不同的屏幕,可以采用 rem 方案。rem 是指 html 根节点的 font-size 大小。但是我们平常书写代码习惯使用 px 来写,因此就需要在工程化上将 px 来转换成 rem。
使用
px2rem-loader
可以在 webpack 构建过程中自动的将 px 转换成 rem。除此之外,我们还需要根据手机屏幕的大小来动态的修改 html 节点的 font-size 大小。这里采用手淘的
lib-flexible
方案。安装
在 html 的 head 标签内加入