需求原因
自己用 nuxt3 寫官網(wǎng)發(fā)現(xiàn)用 postcss-px-to-viewport 這個(gè)插件雖然能夠?qū)崿F(xiàn)基于 vw 的響應(yīng)式，但是無法做到限制寬度，比如設(shè)計(jì)稿 1920p，我只想讓最大縮放比例為 1920p，不能超過，就無法實(shí)現(xiàn)了。
方案參考
純 css 的話，有兩個(gè)辦法，一種用 px 生成兩套代碼，一套移動(dòng)端的 vw 視圖，一套最大寬度的媒體查詢代碼，另一種方法是用類似 min(vw, px) 的 css 函數(shù)限制 vw 的最大值。
有大佬已經(jīng)寫好了插件 postcss-mobile-forever
可以實(shí)現(xiàn)限制最大寬度，原理就是我上面說的，提供了兩個(gè)辦法，把新 px 放到插件生成的媒體查詢里，或者轉(zhuǎn)為 css 函數(shù)。
最后可以實(shí)現(xiàn)移動(dòng)端、桌面端和移動(dòng)端橫屏都有蠻好的展示效果。
Github 主頁：https://github.com/wswmsword/postcss-mobile-forever
npm 主頁：https://www.npmjs.com/package/postcss-mobile-forever
使用方式請(qǐng)點(diǎn)擊上面的文檔地址喲??文章來源：http://www.zghlxwxcb.cn/news/detail-821139.html
感謝
postcss-px-to-viewport 怎么限制最大寬度文章來源地址http://www.zghlxwxcb.cn/news/detail-821139.html
到了這里，關(guān)于【前端可視化】postcss-px-to-viewport 適配怎么限制最大寬度？使用 postcss-mobile-forever的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
