青岛红岛做网站,高端电子网站建设,农产品营销策划方案,北京高端购物商场需求原因
自己用 nuxt3 写官网发现用 postcss-px-to-viewport 这个插件虽然能够实现基于 vw 的响应式#xff0c;但是无法做到限制宽度#xff0c;比如设计稿 1920p#xff0c;我只想让最大缩放比例为 1920p#xff0c;不能超过#xff0c;就无法实现了。
方案参考 纯 c…需求原因
自己用 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 怎么限制最大宽度
