Vue通过postcss-px-to-viewport进行手机端适配

最新推荐文章于 2024-07-10 14:53:06 发布
最新推荐文章于 2024-07-10 14:53:06 发布
阅读量537 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js html5 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Creampudding/article/details/120788796
版权

官网地址：https://www.npmjs.com/package/postcss-px-to-viewport

npm安装：npm install postcss-px-to-viewport --save-dev

之后在项目中找到.postcssrc.js，下方在新建一个

之后就按照设计稿的尺寸写，会自动进行设配

例：

 但是代码中：

 会根据大小对单位自动进行转换

 

Creampudding
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue postcss-px-to-viewport 自适应
employerboos的博客
01-19 478
postcss-px-to-viewport 将px单位转换为视口单位（vw,vh,vmin,vmax）的PostCSS 插件。 链接：https://github.com/evrone/postcss-px-to-viewport 安装 npm 安装 npm install postcss-px-to-viewport --save-dev yarn 安装 yarn add -D postcss-px-to-viewport 配置 新建postcss.config.js文件，文件与package
前端开源库-postcss-px-to-viewport
08-29
前端开源库-postcss-px-to-viewportpostss px to viewport，一种将px转换为viewport单位（vw、vh、vmin、vmax）的CSS后置处理器。
Vue移动端 / PC端适配解决方案：postcss-px-to-viewport
大灰狼的小绵羊哥哥的博客
09-29 2454
移动端web适配
如何在vue-cli中使用postcss-px-to-viewport(px自动转为vw)
最新发布
m0_60189398的博客
07-10 169
如何在vue-cli中使用postcss-px-to-viewport(px自动转为vw)
移动端布局之postcss-px-to-viewport
subsistent的博客
03-25 1039
这种换算已经是颇为方便，但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为100时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有50的，有16的，很多已经严重超出口算力所能及的范畴了。没错，在那个移动端UI稿尺寸为750*1334满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为120px*40px，那么开发者对应的写成1.2rem*0.4rem就可以了。
postcss-px-to-viewport 从入坑到放弃 （nuxt3搭建响应式官网解决方案 ）
Vinca@的博客
05-07 3486
什么是 postcss-px-to-viewport将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。为什么使用 postcss-px-to-viewport在pc端盛行的时代 ，如果你不想去适配更多的pc端，可以采用它。由于nuxt3本身已带postcss，所以无需额外安装。
postcss-px-to-viewport安装及使用
sunddy_x的博客
05-19 1万+
简介 如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。 安装 npm安装 npm install postcss-px-to-viewport --save-dev yarn安装 yarn add -D postcss-px-to-viewport pnpm安装 pnpm add -D postcss-px-to-viewport 配置参数 默认参数： { // (String) 需要转换的单位，默认为"px" uni
postcss-px-to-viewport的适配使用
qq_51545970的博客
02-15 1767
在写移动端的时候，一直为了适配烦恼。通常解决办法都是使用百分比、弹性布局、媒体查询等方法。想偷懒，找个一劳永逸的方法来解决屏幕适配的问题。然后postcss-px-to-viewport就是一个很完美的插件，通过将px转化为vw、vh。主要适用于移动端官网。
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。 首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
需要注意的是，目前`px2rem-loader`只能转换`.vue`文件中的`style`标签内CSS代码中的px为rem，并不支持在`script`标签和元素的`style`属性中直接使用px2rem-loader。 总结来说，使用lib-flexible可以解决Vue项目在...
vue做移动端适配最佳解决方案(亲测有效)
12-04
代码如下:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano –S 2. 对 PostCss 进行配置 找到在根目录中的.postcssrc.js，对PostCSS...
Vue-cli3.X使用px2 rem遇到的问题及解决方法
10-16
通过上述步骤，可以在Vue-cli3.X项目中顺利使用px2rem，解决设计稿在不同设备间的适配问题。这些配置和处理方式对于追求项目搭建简洁高效和现代前端开发体验的开发者来说，具有很高的参考价值。
vue3_移动端开发 postcss-px-to-viewport 插件
qq_45104829的博客
05-31 273
【代码】vue3_移动端开发 postcss-px-to-viewport 插件。
移动端适配 之 postcss-px-to-viewport
qq_46302247的博客
06-02 454
在postcss.config.js 下写配置；（如果没找到 postcss.config.js 可以自己新建） 这里配置的是一个375*667的设计稿，也就是按照 真实iPhone6的宽高除2 // postcss.config.js
vite+ts实现移动端自适应布局
agui3717的博客
10-06 143
第一步 npm i postcss-px-to-viewport 详情见官网。在Vite.config.ts里面配置。
前端页面适配之postcss-px-to-viewport
热门推荐
不想学习的打工人的博客
03-24 1万+
postcss-px-to-viewport是一个 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位。它可以帮助我们实现在不同屏幕尺寸下的自适应布局，以提高页面的响应性和可用性。
移动端布局之postcss-px-to-viewport（兼容vant）
cherry_zhang18的博客
05-11 1376
主角是谁 在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案：post-css-to-viewport 痛点在哪里 在之前有一种流行已久的移动端适配方案，那就是rem，我想下面这两句代码，有不少老移动端都不会陌生： const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; docu
响应式布局之viewport-超级简单
故里2130
02-13 1657
多的就不说了，但是要补充一点，最重要的是： 使用vite创建和官网不一样，不需要创建postcss.config.js，直接在vite.config.js中创建就行了，或者创建postcss.config.js后，必须在vite.config.js中引用。上面的文章可以实现响应式布局，根据浏览器的大小变化而变化，但是相对于viewport来说，之前的还是有点复杂，而使用viewport更加的简单。那么代码的大小，就是实际的大小，必须是这里的400px，600px。1600px的电脑效果，宽度响应式变小了。
postcss-px-to-viewport 适配vue
07-28
回答: postcss-px-to-viewport是一个用于将px单位转换为vw单位的PostCSS插件，适用于Vue项目。\[1\]要在Vue项目中使用postcss-px-to-viewport，首先需要安装postcss和postcss-loader，可以使用以下命令进行安装：npm i postcss postcss-loader -D。然后，安装postcss-px-to-viewport插件：npm i postcss-px-to-viewport -D。\[2\]接下来，需要在webpack配置中引入postcss-px-to-viewport插件，并进行相应的配置。可以参考以下示例代码：\[3\] ```javascript // 引入插件 const postcssPxToViewport = require("postcss-px-to-viewport"); module.export = { module: { rules: \[ { test: /\.css$/i, use: \[ "style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: \[ postcssPxToViewport({ viewportWidth: 320, // 设计稿宽度 unitPrecision: 5, // px转换后的小数保留位数 minPixelValue: 1, // 小于多少像素不转换 selectorBlackList: \["ignore-"\], // 有ignore-* 的类名不会被转换 }), \], }, }, }, \], }, \], }, }; ``` 以上是一个简单的webpack配置示例，其中postcss-px-to-viewport插件的配置参数可以根据实际需求进行调整。配置完成后，postcss-px-to-viewport插件会自动将CSS中的px单位转换为vw单位，实现适配效果。 #### 引用[.reference_title] - *1* [vue3使用postcss-px-to-viewport适配屏幕](https://blog.csdn.net/wangping146/article/details/126436251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [移动端适配 rem、postcss-pxtorem、postcss-px-to-viewport、vw vh](https://blog.csdn.net/xuyanl/article/details/129499800)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值