如何同时考虑响应的宽度和高度？

Posted 2023-03-06

【中文标题】如何同时考虑响应的宽度和高度？

【英文标题】：how to take into account both the width and the height for the responsive?

【发布时间】：2021-10-14 01:15:17

【问题描述】：

我尝试将我的网站设置为响应式（使用我首先构建桌面的媒体查询），使用带有 Firefox (f12) 的响应式/自适应模式来查找宽度级别的断点。虽然我认为这很好，但一旦我改变高度或使用 ipad pro 作为模板，我的所有响应都因高度而中断。我觉得奇怪的是，据我所知，媒体查询似乎是基于宽度的，那么如何同时考虑不同的高度？

【问题讨论】：

您是否在 head-part 中包含任何 <meta？

【参考方案1】：

您可以向媒体查询添加高度要求，如下所示：

<style>
body 
  background-color: yellow;


@media only screen and (max-width: 600px) and (max-height: 500px) 
  body 
    background-color: lightblue;
  

</style>

【讨论】：

感谢您的快速回答！我不知道你可以直接指定高度！我会努力的！