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

CSS 媒体查询不响应给定的最大宽度或最小宽度

CSS 媒体查询不响应给定的最大宽度或最小宽度

森栏 2024-01-22 15:30:27
在 CSS 中,当我提到 (max-width: 800px) 时,浏览器应该在屏幕达到 800px 时加载该样式,但我的浏览器在 720px 时加载该样式,为什么会发生这种情况?这是 CSS 媒体查询@media (max-width: 800px) {  #header-home {    height: 30rem;    .header-content {      padding-top: 5rem;    }  }}当屏幕宽度低于 800px 时,它就不起作用了。但当屏幕低于 720px 时它会起作用
查看完整描述

2 回答

?
qq_花开花谢_0

TA贡献1835条经验 获得超7个赞

错误,它应该加载最大 800px 的样式


你应该做这个:


@media (min-width: 800px) {

  #header-home {

    height: 30rem;

    .header-content {

      padding-top: 5rem;

    }

  }

}


查看完整回答
反对 回复 2024-01-22
?
人到中年有点甜

TA贡献1895条经验 获得超7个赞

你有两个错误。


@media only screen and (min-width: 800px)  {

  #header-home {

    height: 30rem;

    .header-content {

      padding-top: 5rem;

    }

  }

}


当屏幕的最小宽度为800PX时,您需要在指定宽度之前添加only screen and并且要更改样式。所以,不会的,max-width会的min-width


如果它继续存在,则意味着问题不在这里。页面上的其他元素似乎导致了它。可能是图像或按钮边距


查看完整回答
反对 回复 2024-01-22
  • 2 回答
  • 0 关注
  • 148 浏览

添加回答

举报

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