Question

我开始学习如何创建一个“响应式网页”，并且到目前为止只使用了显示网页的窗口宽度来更改布局。我想知道是否有办法检测它所显示的显示器的比例（如果它是4：3，标准16：9,21：9等）以改变自1440p（2560x1440）和Ultrawide 1080p（2560x1080）以来的布局）共享相同的像素宽度。

Answer 1

尝试在一个媒体查询中设置宽度和高度，用“和”一词分隔：

   @media (min-height: 500px) and (min-width: 580px) {
        /* CSS stuff */
    }

使用此类媒体查询，您可以定位不同比例的屏幕 - 即使具有相同的宽度。

Answer 2

易。要在CSS中执行此操作，请将两个媒体查询与单词and结合使用：

@media screen and (min-width: 1336px) and (min-height: 768px) {
  /* Your code */
}

要在javascript中执行此操作，只需将screen.width除以screen.height即可获得宽高比：

var aspectratio = screen.width / screen.height

如何使网页响应不同的比例宽度？

2 个答案: