标签：基准值 rootValue 适应 file flexible 移动 postcss 页面

引言

我们在日常开移动端页面时，总是要面临用户有各种各样的机型，屏幕大小的不同，会导致我们在开发机型上开发出来的页面，放在其他机型上，页面就会变形或者变得很丑。为了解决这一问题，淘宝开源了一套移动端适配方案: flexible.

使用

• 普通引入:
  1. 在页面中引入源码

  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
  

  2. 根据设计图的尺寸确定基准值，假如设计图为750px，flexible内把设计图分为了10份，所以我们设置基准值为75px,在vscode中可以使用cssrem插件设置基准值为75px,在页面中输入75px就会自动转化为1rem.
     

3. 现在就可以编写正常的页面，不需要去管其他的机型，flexible会帮我们自动适配。

• 包引入(基于Vue)

1. npm下载

 		npm install lib-flexible --save

2. 在index.js中引入

import 'lib-flexible'

3. 下载 postcss-plugin-px2rem 插件,自动转换rem

npm install postcss-plugin-px2rem --save-dev

4. 配置postcss.config.js, 如果没有该文件，在根目录下创建

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-plugin-px2rem')

module.exports = ({ file }) => {
  let rootValue
  // vant 37.5 https://github.com/youzan/vant/issues/1181
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    rootValue = 37.5
  } else {
    rootValue = 75
  }
  return {
    plugins: [
      autoprefixer(),
      pxtorem({
        rootValue: rootValue,
        propList: ['*'],
        minPixelValue: 2
      })
    ]
  }
}

标签：基准值,rootValue,适应,file,flexible,移动,postcss,页面
来源： https://blog.csdn.net/m0_46057827/article/details/121649197

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。