vue2+vant开发H5项目如何将单位px转换成vw--postcss插件

原创

已于 2024-01-25 15:01:50 修改 · 931 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript #javascript #android

于 2023-11-01 18:11:18 首次发布

本文介绍了如何使用postcss-px-to-viewport插件将Vue2项目中的px单位转换为vw，以便实现响应式设计，包括配置步骤、视口宽度的设定以及如何处理不同设计稿和排除特定CSS属性的单位转换。

用vue2框架搭建的H5项目，如何使页面自适应不同的屏幕呢?目前主流的是使用插件postcss-px-to-viewport来自动将px单位转换成vw。
一、首先，我们创建项目的时候，就要下载插件

yarn add postcss-px-to-viewport@1.1.1 -D
或者
npm i postcss-px-to-viewport@1.1.1 -D

二、然后直接在项目文件夹创建postcss.config.js文件

module.exports = {
   
   
  plugins: {
   
   
    autoprefixer: {
   
   }, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport":

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Jolly_zhang

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3中如何把px转成vw单位---(postcss-px-to-viewport-8-plugin)

zhw_1219的博客

06-09

933

Vue3中如何把px转成vw单位---(postcss-px-to-viewport-8-plugin)

Vue2 - 项目中的 vw 适配

qq_56101688的博客

01-20

658

② 根目录新建 postcss.config.js 文件，填入配置。目标：基于 postcss 插件实现项目 vw 适配。Vant 2官方配置。

1 条评论您还未登录，请先登录后发表或查看评论

px2vw一个px单位转成vw单位的VSCode插件

08-12

px2vw 一个 px 单位转成 vw 单位的 VSCode 插件

vue 行内样式 px 单位转换为 vw

weixin_45842460的博客

03-09

1682

vue2vue2安装插件 npm i。

vite,将行内样式style中的px转成vw插件

qq_30418537的博客

05-29

1877

一个可以将标签内样式 px 转换 vw 的 plugin。

vue2.x+vantUI搭建移动端并适配750设计稿

weixin_48286936的博客

04-29

1035

文章目录前言一、学习目标二、创建vue项目1.文件夹下创建新的项目2.读入数据总结前言本文在已安装node、npm、vue-cli等前提下进行，请确保自己的node -v,npm -v和vue -V是正常显示版本的以下是环境和命令： node环境（自带npm） npm install webpack -g npm install --global vue-cli 一、学习目标搭建vue移动端项目框架 vantUI按需引入开发设配750设计稿二、创建vue项目 1.文件夹下创建新的项目 vue

nuxt3 + ts + vue3 + axios + vant + element-plus + sass + pinia vue3服务端渲染，从构建到部署，兼容pc+移动端

局外人LZ的博客

04-02

3365

简介：该教程兼容pc+移动端，如只需一端，可忽律兼容教程部分，根据需要运行的客户端构建项目。

vite+vue3+vant H5手机端应用项目快速搭建

最新发布

07-15

### 项目初始化首先，需要安装 Node.js 和 npm。推荐使用最新稳定版本的 Node.js（16.x 或更高）以获得最佳兼容性。...以上步骤涵盖了使用 Vite + Vue3 + Vant 快速搭建 H5 移动端应用项目的全过程[^3]。

TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建

学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等

03-19

821

如果要删除可以使用下面命令。

移动端项目vw单位，px-to-vw插件

angrynouse的博客

08-21

4952

输入px-to-vw--可以看到px单位被自动转换为vw单位了

postcss-px2vw:一款 PostCSS 插件，将 px 转换成 vw 和 rem

08-04

postcss-px2vw 一款插件，将 px 转换成 vw 和 rem。该插件主要结合了和的功能，精简了不常用的配置。默认将 vw 作为优先单位使用，以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem，这款插件很好的解决了该问题。安装 $ npm i @moohng/postcss-px2vw -D 使用 // .postcssrc.js module.exports = { plugins: { '@moohng/postcss-px2vw': {} } } 举例： // input .class { border: 1px solid black; margin-bottom: 1px; font-size: 20px; line-height: 30px; } // output .class { border

移动端适配方案——px自动转vw

qq_29510269的博客

08-08

6220

移动设备的普及使得移动端适配成为现代 Web 开发的关键一环。为了确保你的网站在各种屏幕尺寸上都能够提供出色的用户体验，使用相对单位来代替固定单位（如像素）是一个重要的技术选择。本文将为你详细介绍将像素（px）转换为视口宽度单位（vw）的史上最全方案，从手动计算到使用插件，从CSS变量到循环媒体查询，让你在移动端适配中能够游刃有余。

基于postCSS手写postcss-px-to-vewiport插件实现移动端适配

Ghmin的博客

04-22

1415

目前前端实现移动端适配方案千千万，眼花缭乱各有有缺，但目前来说postcss-px-to-vewiport是一种非常合适的实现方案，是一个基于postCss开发的插件，其原理就是将项目中的px单位转换为vw(视口宽度)。

Vue 2快速实现px转vw适配

m0_63466615的博客

06-25

1284

本指南详细介绍如何在 Vue 2 + Vue CLI 项目中使用插件，实现自动将 px 单位转换为 vw 单位的响应式设计。

Vue 项目中的自适应布局：px 转换成 vw/vh

weixin_43263566的博客

05-26

6327

Vue 项目中的自适应布局：px 转换成 vw/vh

Vue把px转换单位 px-to-vw-css单位转化插件

nolanElio的博客

05-14

802

1.安装插件命令行输入:npm install postcss-px-to-viewport --save-dev 安装成功安装完成后会自动生成一个配置文件 postcss.config.js 写入相关配置 module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport":{ viewportWidth:375,//视窗的宽度对应的是我们设计稿的宽度 viewportHeight:66

postcss-px2vw插件将px转vw、rem

江一铭

08-18

1778

postcss-px2vw 一款 PostCSS 插件，将 px 转换成 vw 和 rem。该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能，精简了不常用的配置。默认将 vw 作为优先单位使用，以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem，这款插件很好的解决了该问题。安装 $ npm install @moohng/postcss-px2vw --save-dev 使用 // .postcssrc.js module.

项目的px单位如何转化vw单位

m0_70015558的博客

10-13

2314

使用 postcss-px-to-viewport，一步搞定。话不多说，直接上菜。安装： npm installpostcss-px-to-viewport --save-dev 安装后在根目录下会创建 postcss.config.js文件。