lib-flexible与viewport--关于移动端适配方案的替换

本文介绍了移动端开发中从使用lib-flexible转向viewport单位的转变。lib-flexible作为过渡方案已不再被官方维护,而viewport单位的兼容性提升使其成为更好的选择。通过postcss-px-to-viewport插件,可以将px自动转换为vw单位实现适配。然而,viewport全屏使用可能导致PC端显示问题,需根据设计稿和应用场景谨慎选择。

做移动端开发经常会用到 lib-flexible + postcss-pxtorem 这两个插件,对于他的使用我们都已经比较熟悉了,这里就不在介绍使用方法了。本文内容主要是介绍 lib-flexible 的源码内容,以及他的替代方法viewport 的使用。
由于 viewport 单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,官方已经不再维护了,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用vw的兼容方案来替代此方案。

viewport

这里我介绍一下viewport的使用方法,viewport配置起来很容易,只需要新增一个postcss.config.js文件,然后下载yarn add -D postcss-px-to-viewport,这样在代码中写入的px会自动转换成vw单位,同样可以达到移动端适配的效果。

安装postcss-px-to-viewport插件

npm install postcss-px-to-viewport -save-dev

meta的配置

    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />

postcss.config.js文件内容

// postcss.config.js文件内容
module.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值