html - 为什么这个画廊没有响应？

Question

我不知道我应该在此画廊代码中更改什么才能使其在手机上响应。当我在电脑屏幕上显示时，一切都很好，但在手机屏幕上却坏了。

我已经尝试过不同的 Bootstrap 命令来使这段代码响应，但没有任何成功。

下面是完整的图库代码: https://bootsnipp.com/snippets/Ga9k0

Answer 1

你应该使用媒体查询，例如:

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

这里还有一个例子:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

在这里:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

查看实际设备分辨率:

http://gs.statcounter.com/screen-resolution-stats