首頁猿問有大佬遇到過這個問題嗎：尋求scs...

有大佬遇到過這個問題嗎：尋求scss函數(shù)和媒體查詢組合方案跪求！

JavaScript

哈士奇WWW 2019-10-08 09:08:22

如題:需求是小于1920px，vw函數(shù)直接返回px值，大于1920轉(zhuǎn)換為vw，這樣做的目的是在頁面中不需要寫媒體查詢的代碼$vw_base:1920;/*設(shè)計稿基數(shù)*//*嘗試將媒體查詢?nèi)诤系絊CSS函數(shù)*/@mediascreenand(min-width:1920px){@functionvw($px){@return($px/$vw_base)*100vw}}@mediascreenand(max-width:1920px){@functionvw($px){@return$px}}頁面中使用.index-comp-ct{width:vw(1920);height:vw(1080);border:1pxsolid;overflow:auto;}但是這樣行不通，不知道是否有其他方案

查看完整描述

2 回答

泛舟湖上清波郎朗

TA貢獻1818條經(jīng)驗獲得超3個贊

自問自答:拋磚引玉我的解決方式：自己搞個loader,處理樣式//vue.config.jsmodule.exports={...chainWebpack:config=>{constcssRule=config.module.rule('vue')cssRule.use(require.resolve('./my-loader.js')).loader(require.resolve('./my-loader.js'))},...}loader：//my-loader.jsconstvwLine=/^\s*(\w+(?:-\w+)?):((\s*vw\(\d+\)){1,4})(\w)*\s*;$/mgi//匹配是否含有vw單位;constvwValue=/vw\((\d+)\)/functionreplaceFn(match){return`@mediascreenand(min-width:1920px){${match.trim()}}`+'\n'+`@mediascreenand(max-width:1920px){${match.replace(vwValue,'$1px')}}`}module.exports=function(content){content=content.replace(vwLine,replaceFn)this.callback(null,content)}