【前端可视化】postcss-px-to-viewport 适配怎么限制最大宽度？使用 postcss-mobile-forever

最新推荐文章于 2024-06-30 11:39:58 发布
最新推荐文章于 2024-06-30 11:39:58 发布
阅读量1.5k 收藏 8
点赞数 8
分类专栏： 前端可视化 文章标签： postcss 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IAIPython/article/details/135764440
版权

需求原因

自己用 nuxt3 写官网发现用 postcss-px-to-viewport 这个插件虽然能够实现基于 vw 的响应式，但是无法做到限制宽度，比如设计稿 1920p，我只想让最大缩放比例为 1920p，不能超过，就无法实现了。

方案参考

纯 css 的话，有两个办法，一种用 px 生成两套代码，一套移动端的 vw 视图，一套最大宽度的媒体查询代码，另一种方法是用类似 min(vw, px) 的 css 函数限制 vw 的最大值。

有大佬已经写好了插件 postcss-mobile-forever

可以实现限制最大宽度，原理就是我上面说的，提供了两个办法，把新 px 放到插件生成的媒体查询里，或者转为 css 函数。

最后可以实现移动端、桌面端和移动端横屏都有蛮好的展示效果。
在这里插入图片描述

Github 主页：https://github.com/wswmsword/postcss-mobile-forever
npm 主页：https://www.npmjs.com/package/postcss-mobile-forever

使用方式请点击上面的文档地址哟👆

感谢

postcss-px-to-viewport 怎么限制最大宽度

努力挣钱的小鑫
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
postcss-mqwidth-to-class:PostCSS插件将最小最大宽度的媒体查询转换为类，对于不支持媒体查询的客户端（例如IE8）很有用
05-12
PostCSS mqwidth-to-class 插件将最小/最大宽度的媒体查询转换为类，对于不支持媒体查询的客户端（例如IE8）很有用。 例子 /* Input example */ @media ( min-width : 768 px ) and ( max-width : 991 px ) { . foo { float : left; } } /* Output example */ . min-width-768px . max-width-991px . foo { float : left; } 用法 postcss ( [ require ( 'postcss-mqwidth-to-class' ) ] ) 有关您的环境的示例，请参见文档。 笔记 仅支持px单位。 忽略查询中的其他任何内容，例如屏幕，打印，方向。 您需要J
前端开源库-postcss-px-to-viewport
08-29
使用`postcss-px-to-viewport`时，开发者可以通过配置参数来控制转换行为，例如设置最小视口宽度、最大视口宽度、单位精度等。这样，我们可以在保持设计灵活性的同时，确保在不同设备上的一致性。 为了开始使用`...
vue3移动端自适应方案
qq_62809806的博客
09-14 4157
vue3移动端自适应插件使用
postcss-px-to-viewport 从入坑到放弃 （nuxt3搭建响应式官网解决方案 ）
Vinca@的博客
05-07 2758
什么是 postcss-px-to-viewport将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。为什么使用 postcss-px-to-viewport在pc端盛行的时代 ，如果你不想去适配更多的pc端，可以采用它。由于nuxt3本身已带postcss，所以无需额外安装。
移动端方案 postcss-mobile-forever
weixin_37901601的博客
03-12 2058
一款 PostCSS 插件，用于将基于特定宽度的固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图，这种伸缩视图常见于移动端页面。postcss-mobile-forever 可以配合使用，前者用于编译阶段，后者用于运行阶段。px->vw@mediafixed使用媒体查询限制最大宽度的方法，能够为桌面端与横屏各自设置最大宽度。如果您在使用实现伸缩界面的时候，不希望界面在大屏设备上撑满整个屏幕而难以浏览，希望界面在达到某一个合适的宽度后停止伸缩（限制最大宽度），您可以使用本插件。
推荐开源项目：PostCSS-Mobile-Forever - 永远的移动端适配利器
gitblog_00097的博客
03-31 517
推荐开源项目：PostCSS-Mobile-Forever - 永远的移动端适配利器 项目地址:https://gitcode.com/wswmsword/postcss-mobile-forever PostCSS-Mobile-Forever 是一个强大的前端工具，基于 PostCSS 库，专为解决移动端网页的响应式布局和适配问题而设计。通过自动化处理CSS，它可以简化移动开发过程，确保你的网...
postcss pxtorem 配置
qq_35229216的博客
08-08 2185
postcss pxtorem 配置 // rootValue: 75, //根标签的font-size大小 // unitPrecision: 5,//转换成rem后的小数位数 // propList: ['*'],//需要转换的属性列表 // selectorBlackList: [],//则是一个对css选择器进行过滤的数组，比如你设置为['fs']，...
移动适配viewport方案记录
z_orz_d的博客
02-25 330
随着viewport单位在浏览器中的兼容，移动端适配方案lib-flexible+postcss-pxtorem的转换系数设置有点不想设置了。 本次记录使用postcss-px-to-viewport插件做viewport适配的方案 安装 npm install postcss-px-to-viewport --save 配置 项目根目录新建.postcssrc.js文件 module.exports = { plugins: { autoprefixer: {}, // 用来给不同的.
前端开源库-postcss-px-to-viewport.zip
10-05
2. 配置：在项目中创建一个PostCSS配置文件（如postcss.config.js），并设置postcss-px-to-viewport的选项，如转换的最小和最大视口宽度、单位转换的精度等。 3. 引入：在你的CSS文件中，你可以继续使用px单位，插件...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。 首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...
postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。 通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择
05-02
postcss px到视口 English | 的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。 演示版 如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; ...
postcss-px2viewport:PostCSS的插件，可生成rem版本，vm版本以及@ 1x，@ 2x和@ 3x样式表
05-01
postcss-px2viewport 一个postcss插件，结合viewport.js使用 默认使用vw作为布局单位，对于不支持vw单位的，则使用rem进行布局 对于标记了/*px*/的，则转换为[data-dpr="1"]、[data-dpr="2"]、[data-dpr="3"]三种...
postcss-px-to-viewport
weixin_30691871的博客
09-29 387
autoprefixer: {}, 'postcss-px-to-viewport': { unitToConvert: 'px', //将要转化的单位 viewportWidth: 750, //(Number)视图的宽度 unitPrecision: 3, //(Number)指定`px`转换为视窗单位值的小数位数，默认...
移动端H5应用，使用了postcss-px-to-viewport插件，750设计稿兼容Vant框架
最新发布
weixin_45849417的博客
06-30 287
目前在搞一个移动端的H5项目，使用的是Vue3+Vant框架。设计稿是750的，而且使用了postcss-px-to-viewport。所以发现使用Vant框架的时候，发现有点问题，好像缩小了，后来百度了一下，是需要设置portcss.config.js。下面是代码：报错时候的配置：使用下面这个。
关于 portcss-px-to-viewport的使用
weixin_47596965的博客
06-06 397
通过 npm i postcss-px-to-viewport --save-dev 安装开发环境下的px2vw 安装完成后 在根目录下我们可以找到postcss. config. js文件，如果没有这个文件，我们可以创建新的js文件并命名为postcss. config. js 在postcss. config. js中 module.exports = { plugins: { autoprefixer: {} “postcss-px-to-viewport”:{ viewportWidth: 375
Vue2适配方案：postcss-px-to-viewport
why404
06-01 2312
基于vue2的vw适配方案
移动端适配方案，基于postcss
zhanggei的博客
02-20 332
移动端适配的两种方案（postcss）
使用postcss实现移动端响应式单位设置
RogerWang_H5的博客
07-06 569
目录前言一、依赖的npm插件二、配置postcss.config.js文件三、开发配置新增postcss-loader总结 前言 最近工作中有个移动端的项目是用px布局的，非响应式。要实现单位响应式，大量px布局的样式文件，改rem的话比较麻烦，因此尝试了postCss自动转换响应式单位的方案。 一、依赖的npm插件 autoprefixer postcss postcss-cssnext postcss-import postcss-loader postcss-modules-values pos
postcss-px-to-viewport 的使用
weixin_45773503的博客
08-04 798
安装 npm install postcss-px-to-viewport --save-dev 配置vue.config.js文件 module.exports = { css: { loaderOptions: { postcss: { plugins: [ require(‘postcss-px-to-viewport‘)({ uni
解决vue 版本使用postcss-px-to-viewport适配element-ui的问题
05-28
在Vue项目中使用postcss-px-to-viewport适配Element UI的问题，可以尝试如下解决方案： 1. 安装 postcss-px-to-viewport 和 postcss-import 插件： ```javascript npm install postcss-px-to-viewport postcss-import -D ``` 2. 在根目录下新建一个postcss.config.js文件，并添加以下配置代码： ```javascript module.exports = { plugins: { 'postcss-import': {}, 'postcss-px-to-viewport': { viewportWidth: 375, // 设计稿宽度 unitPrecision: 3, // 小数精度 viewportUnit: 'vw', // 转换成的视窗单位 selectorBlackList: ['.ignore', '.hairlines'], // 忽略的类名 minPixelValue: 1, // 小于1px不转换 mediaQuery: false // 允许在媒体查询中转换px } } } ``` 3. 在main.js中引入postcss文件： ```javascript import './assets/css/postcss.css' ``` 4. 重新启动项目即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值