前端 - 用@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

Yes, so there is one pixel difference in the bootstrap. What will happen if there is a conflict? According to the principle of CSS, the effect defined after selection will be selected (when the selector weights are the same). Then this conflict will occur when the screen width is 580px. This situation will be rare when users use it. But it's not a best practice because it requires an extra rendering.