課程
/前端開發(fā)
/Vue.js
/快速入門Web閱讀器開發(fā)
老師,請(qǐng)問 global.scss 里面的那個(gè)$fontSize為啥定義為37.5哦?
2018-10-11
源自:快速入門Web閱讀器開發(fā) 2-5
正在回答
你好,global.scss中設(shè)定了:
$ratio:?375?/?10; @function?px2rem($px)?{ ??@return?$px?/?$ratio?+?rem; }
這里$ratio值的設(shè)定是由用戶決定的,可以根據(jù)自己的實(shí)際需要(或者UI設(shè)計(jì)稿)進(jìn)行修改
這個(gè)值決定了px2rem輸出的結(jié)果,如果設(shè)定為37.5,那么px2rem(20),表示在375px寬度的屏幕下,顯示為20px,計(jì)算方法如下:
第一步:375px寬度的屏幕,1rem=37.5px(因?yàn)樵贏pp.vue中指定了html的font-size=375px/10=37.5px,所以1rem=37.5px)
第二步:計(jì)算px2rem(20)=(20/37.5)rem
第三步:將rem轉(zhuǎn)化為px:(20/37.5) * 1rem = 20/37.5 * 37.5px = 20px
如果屏幕為414px,那么px2rem(20)的計(jì)算結(jié)果為:
px2rem(20)=(20/37.5)*41.4px=22.08px
從而實(shí)現(xiàn)了自適應(yīng)布局,因?yàn)閜x2rem(20)會(huì)隨屏幕寬度放大或縮小,這是一道數(shù)學(xué)題
直接輸出結(jié)論:
1、$ratio的值可以由用戶隨意設(shè)定
2、當(dāng)設(shè)置為37.5時(shí),表示以屏幕寬度375px為基準(zhǔn)
3、如果屏幕寬度大于375px,使用px2rem()方法計(jì)算出的值會(huì)等比例擴(kuò)大
4、如果屏幕寬度小于375px,使用px2rem()方法計(jì)算出的值會(huì)等比例縮小
慕仙6068316
Sam 回復(fù) 慕仙6068316
剛仔
對(duì)于這兩點(diǎn)結(jié)論有個(gè)疑問,如果固定了基準(zhǔn)為$ratio 375 實(shí)際設(shè)計(jì)稿為上述兩種情況怎么做到自動(dòng)縮放,不是只能按照375的設(shè)計(jì)稿縮放嗎
舉報(bào)
帶你了解電子書閱讀器的工作原理,通過Vue.js快速實(shí)現(xiàn)Web閱讀器
2 回答1分42秒,為什么font-size默認(rèn)定義時(shí)37.5呢?
3 回答this.currentBooks.rendition.themes.fontSize(fontSize)字號(hào)不能切換
1 回答為什么說'hideSetting'方法未定義?
2 回答在main.js引入css為啥會(huì)報(bào)錯(cuò)呢
1 回答老師為啥不用vw來適配rem呀
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2018-10-11
你好,global.scss中設(shè)定了:
$ratio:?375?/?10; @function?px2rem($px)?{ ??@return?$px?/?$ratio?+?rem; }這里$ratio值的設(shè)定是由用戶決定的,可以根據(jù)自己的實(shí)際需要(或者UI設(shè)計(jì)稿)進(jìn)行修改
這個(gè)值決定了px2rem輸出的結(jié)果,如果設(shè)定為37.5,那么px2rem(20),表示在375px寬度的屏幕下,顯示為20px,計(jì)算方法如下:
第一步:375px寬度的屏幕,1rem=37.5px(因?yàn)樵贏pp.vue中指定了html的font-size=375px/10=37.5px,所以1rem=37.5px)
第二步:計(jì)算px2rem(20)=(20/37.5)rem
第三步:將rem轉(zhuǎn)化為px:(20/37.5) * 1rem = 20/37.5 * 37.5px = 20px
如果屏幕為414px,那么px2rem(20)的計(jì)算結(jié)果為:
px2rem(20)=(20/37.5)*41.4px=22.08px
從而實(shí)現(xiàn)了自適應(yīng)布局,因?yàn)閜x2rem(20)會(huì)隨屏幕寬度放大或縮小,這是一道數(shù)學(xué)題
直接輸出結(jié)論:
1、$ratio的值可以由用戶隨意設(shè)定
2、當(dāng)設(shè)置為37.5時(shí),表示以屏幕寬度375px為基準(zhǔn)
3、如果屏幕寬度大于375px,使用px2rem()方法計(jì)算出的值會(huì)等比例擴(kuò)大
4、如果屏幕寬度小于375px,使用px2rem()方法計(jì)算出的值會(huì)等比例縮小
2019-09-27
3、如果屏幕寬度大于375px,使用px2rem()方法計(jì)算出的值會(huì)等比例擴(kuò)大
4、如果屏幕寬度小于375px,使用px2rem()方法計(jì)算出的值會(huì)等比例縮小
對(duì)于這兩點(diǎn)結(jié)論有個(gè)疑問,如果固定了基準(zhǔn)為$ratio 375 實(shí)際設(shè)計(jì)稿為上述兩種情況怎么做到自動(dòng)縮放,不是只能按照375的設(shè)計(jì)稿縮放嗎