前端 - 用@media设置html的font-size给rem用出现的问题?
天蓬老师
天蓬老师 2017-04-17 11:27:26
0
1
690

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

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(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.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template