前端 - 用@media設(shè)置html的font-size給rem用出現(xiàn)的問題?
問題描述
我的設(shè)計(jì)稿是640px的,所以設(shè)置font-size:62.5%比較寫值,但是屏幕縮小后的font-size比例我不知如何把控,不知這樣寫對(duì)不對(duì)?min-width: 580px和max-width:580px會(huì)不會(huì)沖突呢?
@media only screen and (min-width: 640px){ html{font-size: 62.5%; }}@media only screen and (max-width: 640px) and (min-width: 580px){ html{font-size: 62.5%; }}@media only screen and (max-width:580px) and (min-width: 440px){ html{font-size: 54%; }}@media only screen and (max-width:440px) and (min-width: 400px){ html{font-size: 46%; }}@media only screen and (max-width:440px) and (min-width: 400px){ html{font-size: 42%; }}@media only screen and (max-width:400px) and (min-width: 360px){ html{font-size: 40%; }}@media only screen and (max-width:400px) and (min-width: 360px){ html{font-size: 32%; }}
問題解答
回答1:會(huì)的,所以bootstrap 里都是差一個(gè)pixel. 產(chǎn)生沖突會(huì)怎樣呢?根據(jù)css的原理會(huì)選擇后定義的效果(選擇器權(quán)重相同的情況下)。那么這個(gè)沖突會(huì)發(fā)生在屏幕寬度580px的時(shí)候。在用戶使用的時(shí)候這種情況會(huì)很少見。但是并不是最佳實(shí)踐,因?yàn)槎噙M(jìn)行了一次額外渲染。
相關(guān)文章:
1. javascript - 怎樣定位一個(gè)動(dòng)作調(diào)用了哪個(gè)js,不打斷點(diǎn)調(diào)試?2. javascript - 如何清除向可編輯的(contenteditable)元素里粘貼的文本的標(biāo)簽和樣式?3. javascript - js正則替換日期格式問題4. javascript - 關(guān)于微信掃一掃的技術(shù)問題5. javascript - ios上fixed定位問題,定位在底部的按鈕不顯示了,但是又可以點(diǎn)擊到,換了一個(gè)類名就可以顯示了,但是設(shè)置的字體大小卻失效了6. javascript - webpack 打包 reactjs項(xiàng)目 css 分離7. javascript - vuex中子組件無法調(diào)用公共狀態(tài)8. javascript - 請(qǐng)教移動(dòng)端從詳情頁返回到列表頁原來位置的問題?9. javascript - (_a = [""], _a.raw = [""],....); js一個(gè)小括號(hào)的是什么意思?10. javascript - Vue.js的ElementUI庫中,如何主動(dòng)觸發(fā)checkbox組件的change事件?
