标签：-- 适配 px rem React vw 100 375

• 适配原理

  • 选择某个手机的尺寸大小作为基准，其他手机进行等比例缩放

  • 一般选择 iPhone 6（2 倍屏幕），屏幕宽度为：375px

• 适配方式

• rem：需要手动修改 html 元素的 font-size；额外设置 body 元素的字体大小为正常值

• vw： 1 vw 等于屏幕宽度的 1%

// rem 适配
// iphone6       html ==> font-size: 37.5px
// iphone6 plus  html ==> font-size: 41.4px
// 
// iPhone 6 下宽高为 100px：
// 100 / 37.5 ≈ 2.667
// height: 2.667rem; width: 2.667rem;

// vw 适配
// iPhone 6 下宽高为 100px：
// 100 / (375 / 100) = 100 / 3.75 ≈ 26.7vw
// height: 26.667vw; width: 26.667vw;

步骤：

• postcss-px-to-viewport 文档

1. 安装 px 转 vw 的包：yarn add -D postcss-px-to-viewport

   • 包的作用：将 px 转化为 vw，所以有了该工具，只需要在代码中写 px 即可

2. 在 craco.config.js 添加相应配置

3. 重启项目，让配置生效

/craco.config.js 中：

const pxToViewport = require('postcss-px-to-viewport')
const vw = pxToViewport({
  // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
  viewportWidth: 375
})

module.exports = {
  // 此处省略 webpack 配置
  webpack: {},

  style: {
    postcss: {
      plugins: [vw]
    }
  }
}

标签：--,适配,px,rem,React,vw,100,375
来源： https://www.cnblogs.com/426jie/p/16599005.html

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