我正在为我的网站使用 Bootstrap 。根据不同的屏幕响应是好的，除非我看到一个方形的大屏幕。内容是在正常屏幕上使用填充顶部居中，我希望它在底部时，它是在一个方形屏幕上查看，因为它看起来很奇怪与白色空间留在下面。我如何使它响应方形屏幕或说大屏幕？我试着使位置相对于底部，它不起作用！
7fhtutme1#
您可以使用媒体查询根据屏幕的像素纵横比来定位屏幕，如下所示：
@media screen and (max-aspect-ratio:1/1) { /* square styles here */ }
下面是它的一个**Fiddle**示例。此特定查询仅针对高度等于width * 或healer * 的屏幕。如果纵横比大于1：1，则意味着屏幕的宽度大于高度。如果要 * 精确 * 定位方块，可以用途：
@media screen and (min-aspect-ratio:1/1) and (max-aspect-ratio:1/1) { /* square styles here */ }
不过我不推荐这个，因为它只会在"精确“的像素比率下工作，对不同的显示大小没有容忍度，就像你在上面的Fiddle例子中看到的那样，这可能会给你带来很多额外的工作。正方形屏幕是独一无二的，因为通常屏幕的方向是纵向或横向，但正方形屏幕可以两者都不是。它们作为显示器也很罕见。你的目标是智能手表吗？
2023年1月更新：智能手表的普及程度已经爆炸式增长，屏幕技术的大幅改进意味着显示屏不再局限于方形和矩形等椭圆形。显示屏可以有圆角、弯曲、像书一样折叠打开、圆形等。所有这些都是不以精确的尺寸和比例为目标的理由！
1条答案
按热度按时间7fhtutme1#
您可以使用媒体查询根据屏幕的像素纵横比来定位屏幕，如下所示：
下面是它的一个**Fiddle**示例。
此特定查询仅针对高度等于width * 或healer * 的屏幕。如果纵横比大于1：1，则意味着屏幕的宽度大于高度。
如果要 * 精确 * 定位方块，可以用途：
不过我不推荐这个，因为它只会在"精确“的像素比率下工作，对不同的显示大小没有容忍度，就像你在上面的Fiddle例子中看到的那样，这可能会给你带来很多额外的工作。
正方形屏幕是独一无二的，因为通常屏幕的方向是纵向或横向，但正方形屏幕可以两者都不是。它们作为显示器也很罕见。你的目标是智能手表吗？
2023年1月更新：智能手表的普及程度已经爆炸式增长，屏幕技术的大幅改进意味着显示屏不再局限于方形和矩形等椭圆形。显示屏可以有圆角、弯曲、像书一样折叠打开、圆形等。所有这些都是不以精确的尺寸和比例为目标的理由！