我正在为我的网站使用 Bootstrap 。除非我在方形大屏幕上看到，否则根据不同屏幕的响应很好。内容使用填充顶部在普通屏幕上居中，我希望它在方形屏幕上查看时确实位于底部，因为它看起来很奇怪，下面留有空白。我如何让它响应方形屏幕或大屏幕？我尝试使位置相对于底部，它不起作用!
最佳答案
您可以使用媒体查询根据像素长宽比定位屏幕，如下所示:
@media screen and (max-aspect-ratio:1/1) {
/* square styles here */
}
这是一个 Fiddle 在行动中。
此特定查询仅针对高度等于宽度或更高的屏幕。如果宽高比高于 1:1，则表示屏幕的宽度大于高度。
如果你想精确地定位正方形，你可以使用:
@media screen and (min-aspect-ratio:1/1) and (max-aspect-ratio:1/1) {
/* square styles here */
}
虽然我不推荐这个，因为它会 only fire at that exact pixel ratio ，让您无法容忍不同的显示尺寸，正如您将在我上面的 Fiddle 示例中看到的那样。这可能会给您自己带来很多额外的工作。
方形屏幕是独一无二的，因为屏幕通常要么纵向要么横向，但方形屏幕不能两者都不是。它们作为展示品也相当罕见。您的目标是智能 watch 吗？
2023 年 1 月更新:智能 watch 的人气激增，屏幕技术的大幅改进意味着显示屏不再局限于正方形和长方形等长方形。显示器可以有圆 Angular 、 flex 、像书一样折叠打开、圆形等。 更有理由不针对确切的尺寸和比例!
关于css - 响应方形大屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20740050/