开发者社区> 问答> 正文

用@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%;
    }
}

展开
收起
杨冬芳 2016-06-20 10:24:03 3444 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

    会的,所以bootstrap 里都是差一个pixel. 产生冲突会怎样呢?根据css的原理会选择后定义的效果(选择器权重相同的情况下)。那么这个冲突会发生在屏幕宽度580px的时候。在用户使用的时候这种情况会很少见。但是并不是最佳实践,因为多进行了一次额外渲染。

    2019-07-17 19:43:43
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载