前端 - 用@media设置html的font-size给rem用出现的问题？

Question

我的设计稿是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%;
    }
}

Answer 1

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