前端 - 用@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 - 在ie下為什么會出現這種情況呢 《 無法獲取未定義或 null 引用的屬性“length”》 ?請大神指教。2. 數據庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。3. javascript - 我是做web前端的,公司最近有一個項目關于數據統計的!4. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)5. javascript - 只是想用node建立一個簡單的服務器6. javascript - vuejs+elementui 購物車價格計算,點擊加減號修改數量總價都不會改變,但是計算執行了7. javascript - vue過渡效果 css過渡 類名的先后順序8. css右浮動字的順序顛倒了9. html5和Flash對抗是什么情況?10. javascript - 如何使用loadash對[object,object,object]形式的數組進行比較
