为了账号安全,请及时绑定邮箱和手机立即绑定

CSS媒体查询重叠的规则是什么?

CSS媒体查询重叠的规则是什么?

慕婉清6462132 2019-11-18 10:47:19
我们如何准确地间隔媒体查询以避免重叠?例如,如果我们考虑以下代码:@media (max-width: 20em) {    /* for narrow viewport */}@media (min-width: 20em) and (max-width: 45em) {    /* slightly wider viewport */}@media (min-width: 45em) {    /* everything else */}在所有支持的浏览器上,分别以20em和45em会发生什么?我见过人们在使用:像799px然后是800px之类的东西,但是屏幕宽度为799.5 px呢?(显然不是在常规显示器上,而是在视网膜显示器上?)考虑到规格,我对此最好奇。
查看完整描述

3 回答

?
冉冉说

TA贡献1877条经验 获得超1个赞

我已经尝试按照这里的建议:


@media screen and (max-width: calc(48em - 1px)) {

    /*mobile styles*/

}

@media screen and (min-width: 48em) {

    /*desktop styles*/

}

但是发现这不是一个好主意,因为它目前无法在Chrome上在我的Ubuntu桌面或Android手机上运行。(如此处所述:calc()在媒体查询中不起作用)但是,我发现了一种更好的方法...


@media screen and (max-width: 47.9999em) {

    /*mobile styles*/

}

@media screen and (min-width: 48em) {

    /*desktop styles*/

}

和ba!


查看完整回答
反对 回复 2019-11-18
  • 3 回答
  • 0 关注
  • 644 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信