移动端响应式px转换插件PostCSS的使用~

一、背景:

在移动端开发中,我们通常使用 viewport 来适配不同的屏幕尺寸。但是,在实际开发中,我们经常遇到以下问题:

1、在不同屏幕尺寸下显示效果不一致。

2、在高分辨率屏幕上,元素过小或过大。

3、使用 rem 单位存在兼容性问题。

二、作用:

设计稿使用 px 单位,但需要适配不同屏幕尺寸。它可以将 px 单位转换为视口单位(vw、vh 或 vmin)

二、安装

javascript 复制代码
npm install postcss-px-to-viewport --save-dev

三、配置

1、postcss.config.js(这里介绍的是将px转换成vw/vh,重启项目即可实现px转vw)

javascript 复制代码
// postcss.config.js
module.exports = {// 导出PostCSS配置对象
  plugins: {// 配置要使用的PostCSS插件
    'postcss-px-to-viewport': {// 配置px转vw/vh的插件
      viewportWidth: 750,// 基准视口宽度(设计稿宽度,单位px)
      viewportUnit: 'vw',// 转换后的视口宽度单位(vw表示视口宽度百分比)
      fontViewportUnit: 'vh',// 字体转换后的单位(vh表示视口高度百分比)
      unitPrecision: 6,// 转换后保留的小数位数
      propList: ['*', '!border*', '!box-shadow'], // 需要转换的CSS属性列表
      // *表示所有属性,!表示排除
      selectorBlackList: ['.ignore', '.hairlines'],// 不进行转换的选择器黑名单
      minPixelValue: 2,// 小于2px的值不进行转换
      mediaQuery: true,// 是否转换媒体查询中的px单位
      exclude: /node_modules/  // 排除node_modules目录下的文件
    },
    'autoprefixer': {// 配置自动添加浏览器前缀的插件
      overrideBrowserslist: ['> 1%', 'last 2 versions']// 指定需要兼容的浏览器版本
      // 全球使用率大于1%的浏览器
      // 每个浏览器的最后两个版本
    }
  }
}

四、实际转换示例

javascript 复制代码
//输入
.container {
  width: 750px;
  padding: 20px;
  border: 1px solid #000;
  font-size: 24px;
}

.ignore {
  margin: 10px;
}

//输出
.container {
  width: 100vw;       /* 750/750 * 100 */
  padding: 2.66667vw; /* 20/750 * 100 */
  border: 1px solid #000; /* 被排除 */
  font-size: 3.2vh;   /* 24/750 * 100 (使用vh单位) */
}

.ignore {
  margin: 10px;       /* 黑名单选择器不转换 */
}

五、视口定义

指用户当前可见的网页区域(不包括浏览器工具栏、滚动条等)。

在移动端,视口通常等于设备屏幕宽度;在桌面端,视口随浏览器窗口大小变化。

相关推荐
知识分享小能手8 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
林恒smileZAZ14 分钟前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3
云中雾丽22 分钟前
flutter中 NotificationListener 详细使用指南
前端
大杯咖啡22 分钟前
一篇文章搞懂,浏览器强缓存以及协商缓存
前端·javascript
王六岁23 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南: Python 元组和映射类型深入指南
前端·javascript·python
_志哥_26 分钟前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
王六岁27 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南:常用的数据类型和列表
前端·javascript·python
1_2_3_28 分钟前
神级JS API,谁用谁好用
前端·javascript
冬至已至31 分钟前
AI 时代的自动化信息获取与整合
前端
用户66006766853934 分钟前
从送花表白实例读懂 JavaScript 对象字面量与代理模式
javascript