Html 在不同的屏幕尺寸上，如何使图像更具响应性

所以我用Photoshop设计了我的网站，现在我正试着编写代码。我很难让“最新游戏”和“最常玩”以及下面的图片在不同的屏幕尺寸上看起来相同。我试着学习一点反应灵敏的设计，但我遇到了麻烦。有人能帮忙，甚至只是提些建议吗。 这是我的Photoshop设计：

这是我的密码：

HTML

将此添加到css中：

img {
  display: block;
  max-width: 100%;
  height: auto;
}

---

这基本上是Bootstrap中的

.img responsive

类，如果您使用Bootstrap，请将

.img responsive

类添加到图像中。

您可以进行媒体查询。有了它，您可以在特定的屏幕宽度和高度触发特定的css系统

例如：

@media(max-width: 768px){ 
    .newgame img {
        width: 150px;
        height: 100px;
    }
}

---

此外，您还应以百分比而不是像素（例如，宽度：50%；而不是宽度：300px；）对大多数属性进行编码。但是我认为开发responisve网站的最好方法是使用Bootstrap。

了解高度和宽度的百分比，以及

em

和

rem

。另外，请阅读媒体查询。好的，谢谢，我将研究引导。它对所有东西都有效吗，比如使用bootstrap的缺点是什么？它是一个框架，有助于定位周围的东西，并内置了很多功能（表单、手风琴、下拉菜单等）。开始时我经常使用它，但自从我开始通过flexbox定位所有东西之后，还有我在jQuery中自己编写的额外功能。好的，我会在Bootstrap上做一些搜索，谢谢你的建议。

img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media(max-width: 768px){ 
    .newgame img {
        width: 150px;
        height: 100px;
    }
}