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