1.选用750X1334的iphone6尺寸的设计图纸
安装 lib-flexible
cnpm install lib-flexible --save
flexible是一个制作H5适配的开源库
在项目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
2.安装插件px转rem
cnpm install px2rem-loader --save
3.配置 px2rem-loader
淘宝转换rem分析
淘宝的思想是无论当前页面多宽,让10rem = 页面宽度 = 100%,拿iPhone6(750px),10rem = 750px ,1rem = 75px
我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10,
例如:设计图纸宽750, remUnit:=750/10=75
在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 5
}
}
并放进 loaders 数组中
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
重点L修改配置后需要重启,然后我们在组件中写单位直接写 px,设计稿量多少就可以写多少了,舒服多了。
参考:http://hjingren/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/
参考:vue中rem的配置
使用实例1:
设计图纸:
ios的375X667pt
在谷歌浏览器选择预览的是iphone 6
此时选用375作为单位
remUnit=375/10=37.5
options: {
remUnit: 37.5,
remPrecision: 5
}
使用效果:标注上是多少pt,代码就写多少px。
。。。
//20200919
默认配置rem,查看移动端的默认rem基数,
网易转换rem分析
网易的设计稿是基于iPhone6设计的也就是宽度750px
然后设置1rem等于100px( HTML font-size为100px),相当于7.5rem = 100%宽度 = 设备的宽度。
以750宽度为例子,此时大约1rem=100px
出现了font-size: 100.053px; 说明flex加rem自适应布局引入有效
切换到手机模式,rem基准单位不变
.。。
pc网页端,限制最小宽度和最大宽度的flex自适应比例
。。
更多推荐
vue-移动端适配
发布评论