Vue postcss-px-to-viewport 自适应

最新推荐文章于 2024-07-10 09:54:31 发布
最新推荐文章于 2024-07-10 09:54:31 发布
阅读量488 收藏
点赞数
分类专栏： Vue 文章标签： vue node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/employerboos/article/details/112681394
版权
本文介绍了如何在Vue项目中使用postcss-px-to-viewport插件，将px单位转换为视口单位，实现响应式布局。详细讲述了通过npm或yarn安装插件，以及配置postcss.config.js文件的过程。
摘要由CSDN通过智能技术生成

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.json在同一目录

module.exports = {
  plugins: {
     autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    'postcss-px-to-viewpory
最低0.47元/天 解锁文章
酸奶(●'◡'●)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解基于vue-cli配置移动端自适应
08-28
本文主要介绍了基于vue-cli配置移动端自适应的方法，主要涉及到三个方面：lib-flexible库的安装和使用、px到rem的转换、vue-cli配置的修改。 首先，在项目中安装lib-flexible库，使用命令`npm i lib-flexible --...
vue postcss-px-to-viewport插件 px转vw
weixin_39520640的博客
11-06 788
npm install postcss-loader postcss-px-to-viewport --save-dev vue-cli3： vue.config.js： module.exports = { devServer: { port: 8080, disableHostCheck: true, }, css: { loaderOptions: { postcss: { plugins: [ require("p
uniapp使用页面适配插件postcss-px-to-viewport页面样式失效问题
XiaoSen125_的博客
10-16 1841
使用了插件之后，页面的元素变成了html的了，所以改一下app.vue页面中的page选择器就好了。2、在项目根目录下添加配置文件 postcss.config.js，并重新启动项目。在app.vue设置的所有页面的背景颜色失效了。
vue页面自适应屏幕尺寸的实战
最新发布
2301_81431930的博客
07-10 317
使用vue开发的页面都是通过px设置它的尺寸，如果换了一个不同尺寸的屏幕就会出现页面排版错乱，显示不完整等情况。下面通过插件将px装换为rem单位适应不同尺寸的屏幕。
Vue用Rem实现自适应布局
weixin_42839080的博客
10-17 4257
一 什么是rem rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。 二 为什么使用rem及原理 2.1 为什么使用r...
vue自适应屏幕大小布局，适应性宽高
m0_63524137的博客
06-29 3538
红色的部分就是你需要加上去的内容这样这个div就已经可以自动获取你的屏幕大小并自己去适应宽高了，但是如果你想在内部div里再次嵌套一个div，仍然也想让他自适应宽高，有意思的就来了。这样就基本上把我们需要的配置好了，现在我们去template里去使用它。设置一个div不论换到什么样比例的屏幕上都能合理舒服的显示。这个的意思是这个框占总高度的80%的20%，就实现了，首先在布局的最外层我们用到:style。其他的欢迎大家评论补充。
vue移动端适配方案 - px 自动转 rem
卫可冬的博客
04-06 2676
1.安装lib-flexible yarn add lib-flexible 2.引入lib-flexible # src/main.ts import 'lib-flexible/flexible' 3.安装postcss-pxtorem yarn add lib-flexible 4.在根目录下新建 postcss.config.js # project_name/postcss.config.js module.exports = { plugins: { // 兼容浏览器，
vw 弹性布局解决方案
yangwq的博客
03-10 586
postcss-px-to-viewport 将px单位转换为视口单位的(vw,vh,vmin,vmax)的PostCSS插件。 简介 如果你的样式需要做根据视口大小来调整宽度，这个插件可以将你CSS中的px单位转化为vw，vw本质上还是一种百分比单位，100vw即等于100%，1vw等于1/100视口宽度。 安装 $ npm install postcss-px-to-viewport --save-dev $ yarn add -D postcss-px-to-viewpo...
从零开始在vue-cli4配置自适应vw布局的实现
11-20
在现代前端开发中，创建自适应布局以适应各种设备屏幕尺寸变得越来越重要。...同时，也可以参考其他相关资料，如 `vue-cli` 文档和 `postcss-px-to-viewport` 的官方文档，了解更多配置细节和使用技巧。
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-cli配置flexible过程详解
10-16
本文详细介绍了如何在使用Vue CLI创建的Vue项目中配置flexible.js以及px2rem-loader，以便实现移动端的自适应布局。以下是根据提供的文件内容总结出的知识点： 1. **flexible.js的介绍与作用** flexible.js是一个轻...
移动端布局之postcss-px-to-viewport（兼容vant）
woniuyibuyibu的博客
05-08 3158
在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案：post-css-to-viewport，如果我说这种方案能解决98%以上的移动端布局痛点，我想整个掘金，应该没有人会反驳。
移动适配 viewport方案
qq_32149823的博客
04-30 1078
viewport适配方案 vw：是 viewport’s width 的简写，1vw 等于 window.innerWidth 的 1%； vh：和 vw 类似，是 viewport’s height 的简写，1vh 等于 window.innerHeihgt 的 1%； vmin：vmin 的值是当前 vw 和 vh 中较小的值； vmax：vmax 的值是当前 vw 和 vh 中较大的值； .logo { font-size: 10vw; // 1vw = 750px * 1% =
【postcss】解决vite中使用postcss-px-to-viewport无法使用vant等多种设计尺寸问题|postcss-plugins
热门推荐
页面仔的博客
04-13 1万+
vite中使用postcss-px-to-viewport适配vant的375和自己的750等其他设计尺寸
Vue3 移动端自适应方案postcss-px-to-viewport
HaushoLin的博客
01-14 1731
Vue3 移动端如何做自适应
【vue】使用postcss-px-to-viewport和style-vw-loader进行pc端和移动端适配，解决行内样式不能转换为vw的问题
qq_43691733的博客
09-15 2202
但是postcss-px-to-viewport做适配，行内样式不能转换为vw，所以使用插件style-vw-loader(github地 https://github.com/hyy1115/style-vw-loader)vue-cli3中我们可以引入postcss-px-to-viewport插件。
vue中用postcss-px-to-viewport实现px-vw转化
huyuehuyuehu的博客
06-05 966
vue中用postcss-px-to-viewport实现px-vw转化 1.安装postcss-px-to-viewport yarn add -D postcss-px-to-viewport 2.创建postcss.config.js并配置 module.exports = { parser: false, sourceMap: false, plugins: { 'autoprefixer':true, //低版本安卓css识别不了，开启可以自动转换让低版本识别的css
基于vue cli5使用vant 组件，postcss-px-to-viewport 无法解析vant内部样式问题
qq_39831708的博客
06-26 3047
参照以上vant官网提供的方式，发现只能编译项目内部开发的页面，根本无法将vant样式px编译为vw单位，以下是使用官方例子后编译后的样式单位 项目基于vue-cli5搭建的，后续解决方式采用webpack中postcss-loader参数postcssOptions解决。具体无法解析的原因不详，估计与vue-cli配置有关。以下是解决后的样式单位 附上解决方案,首先安装postcss-px-to-viewport 以下是vue.config.js的代码,并且支持了项目ui设计稿为750px标准情况..
vue3使用postcss-px-to-viewport
01-04
在Vue3中使用postcss-viewport插件可以实现前端自适应。下面是使用postcss-px-to-viewport的步骤： 1. 首先，安装postcss-px-to-viewport插件。可以使用以下命令进行安装： ```shell npm i postcss-px-to-viewport ``` 2. 在项目的根目录下创建postcss.config.js文件，并在该文件中配置postcss-px-to-viewport插件。可以使用以下代码作为配置示例： ```javascript module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 375, // 视窗的宽度，对应设计稿的宽度 viewportHeight: 667, // 视窗的高度，对应设计稿的高度 unitPrecision: 3, // 指定 px 转换为视窗单位值的小数位数 viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用 vw selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类名 minPixelValue: 1, // 小于或等于 1px 不转换为视窗单位 mediaQuery: false // 允许在媒体查询中转换 px } } } ``` 3. 在项目的入口文件中引入postcss-px-to-viewport插件。可以使用以下代码进行引入： ```javascript import 'postcss-px-to-viewport' ``` 4. 现在，你可以在Vue组件中使用px单位进行样式编写，插件会自动将其转换为vw单位。 请注意，以上步骤是在Vue3项目中使用postcss-px-to-viewport插件的一般方法。具体的配置和使用方式可能会因项目的不同而有所差异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值