問題描述

我的設計稿是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%; }}

問題解答

會的，所以bootstrap 里都是差一個pixel. 產生沖突會怎樣呢？根據css的原理會選擇后定義的效果（選擇器權重相同的情況下)。那么這個沖突會發生在屏幕寬度580px的時候。在用戶使用的時候這種情況會很少見。但是并不是最佳實踐，因為多進行了一次額外渲染。