html - 如何同时考虑响应的宽度和高度?
问题描述
我尝试将我的网站置于响应状态(使用我首先构建桌面的媒体查询),使用带有 firefox (f12) 的响应/自适应模式来查找宽度级别的断点。虽然我认为这很好,但一旦我改变高度或使用 ipad pro 作为模板,我的所有响应都因高度而中断。我觉得奇怪的是,据我所知,媒体查询似乎是基于宽度的,那么如何考虑不同的高度呢?
解决方案
您可以向媒体查询添加高度要求,如下所示:
<style>
body {
background-color: yellow;
}
@media only screen and (max-width: 600px) and (max-height: 500px) {
body {
background-color: lightblue;
}
}
</style>
推荐阅读
- java - 在 Android Studio 中获取按钮以执行操作
- android - 更改 gaddle 的 appId 时奇怪的 Android 颜色行为
- elasticsearch - 如何在 Elasticsearch 中将 id 设置为文档的唯一值
- macos - 使用 com.apple.developer.driverkit.userclient-access 配置配置文件应该如何?
- javascript - 无法连接到 mongdb nodejs
- javascript - 根据另一个选择值更改选择内容
- apache-kafka - 无需 zookeeper 即可工作的 Kafka docker 映像
- jmeter - Jmeter - 非 HTTP 响应代码:在尝试为 1 个用户录制脚本时观察到 org.apache.http.conn.HttpHostConnectException
- sql - SQL Server - 将所有子父关系连接成一个字符串
- node.js - 在 Firebase 中按需下载文件