首頁猿問 ...

尋求scss函數和媒體查詢組合方案求大佬指點！

JavaScript

神不在的星期二 2019-10-25 21:52:31

如題:需求是小于1920px，vw函數直接返回px值，大于1920轉換為vw，這樣做的目的是在頁面中不需要寫媒體查詢的代碼$vw_base:1920;/*設計稿基數*//*嘗試將媒體查詢融合到SCSS函數*/@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貢獻1815條經驗獲得超13個贊

自問自答:拋磚引玉我的解決方式：自己搞個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)}

反對回復 2019-10-25

撒科打諢

TA貢獻1934條經驗獲得超2個贊

Title
這樣試試呢

反對回復 2019-10-25

2 回答
0 關注
636 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

尋求scss函數和媒體查詢組合方案求大佬指點！

尋求scss函數和媒體查詢組合方案求大佬指點！

2 回答

添加回答

尋求scss函數和媒體查詢組合方案求大佬指點！