Question

嗨我正在尝试应用css，当屏幕分辨率为1280 * 720时未应用，但当我手动输入宽度和高度时，谷歌响应检查其工作。这是css的代码

 @media (min-height:720px) and (min-width: 1280px) {
     .space
       {
            margin-top:24.5%;
         }
}

Answer 1

你希望它来自720px to 1280px然后你必须使用media query min-width:720px（即从720px）到max-width:1280px（即小于1280px），如下所示，

div {
  width: 100px;
  height: 100px;
  background: #111;
}

@media screen and (min-width: 720px) and (max-width: 1280px) {
  div {
    background: red;
  }
}

<div></div>

缩放浏览器并查看div背景更改。

Answer 2

在桌面系统上，媒体查询（如min-height）所考虑的大小是浏览器的内容区域的大小，而不是屏幕的分辨率。除非浏览器处于全屏模式，否则具有1280x720屏幕的系统将不使用此媒体查询中的规则，因为某些屏幕用于浏览器工具栏和滚动条，窗口装饰，任务栏（在Windows上）或菜单栏（在macOS上），等。

媒体查询在更改屏幕分辨率时无效，但在更改宽度和高度时工作谷歌响应式开发人员工具检查

2 个答案: