移动端适配方式二之vw

最新推荐文章于 2024-05-24 19:12:54 发布

yezi153

最新推荐文章于 2024-05-24 19:12:54 发布

阅读量923

点赞数

文章标签：前端 ecmascript react

本文链接：https://blog.csdn.net/yezi153/article/details/121648964

版权

本文探讨了移动端适配的重要性，旨在确保不同尺寸手机屏幕内容显示一致，不发生变形。介绍了使用postcss-px-to-viewport插件进行适配的步骤，包括设置基准视口宽度和在项目配置中添加相应规则。适配原理基于等比例缩放，以实现内容跨设备的良好视觉效果。

摘要由CSDN通过智能技术生成

1.为什么做适配

让不同的手机显示的内容，不会出现变形的情况，看起来比例是一样的

2.适配方式

3.适配原理

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

步骤：1.下包（px 转 vw 的包）npm i -D postcss-px-to-viewport

2.在 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]
    }
  }
}