前端 - 用@media設置html的font-size給rem用出現的問題?
問題描述
我的設計稿是640px的,所以設置font-size:62.5%比較寫值,但是屏幕縮小后的font-size比例我不知如何把控,不知這樣寫對不對?min-width: 580px和max-width:580px會不會沖突呢?
@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:會的,所以bootstrap 里都是差一個pixel. 產生沖突會怎樣呢?根據css的原理會選擇后定義的效果(選擇器權重相同的情況下)。那么這個沖突會發生在屏幕寬度580px的時候。在用戶使用的時候這種情況會很少見。但是并不是最佳實踐,因為多進行了一次額外渲染。
相關文章:
1. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?4. javascript - 移動端上不能實現拖拽布局嗎?5. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~6. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化7. 配置Apache時,添加對PHP的支持時語法錯誤8. 實現bing搜索工具urlAPI提交9. phpstudy8.1支持win11系統嗎?10. javascript - nodejs關于進程間發送句柄的一點疑問

網公網安備