如何使用media-queries来更改html

Question

我只是第一次读到媒体查询，这样我就可以让我的网页在智能手机上看起来不一样了。

我知道如何使用它们将不同的样式应用到网页上，例如

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

    body {
            color: green; 
         }

}

但是如何使用它们来更改HTML呢？例如，如果我想仅在智能手机上查看页面时才在两个图像之间添加换行符。

因此，在笔记本电脑上，图像会并排出现，而在智能手机上，一个会在另一个之上。

非常感谢。

Answer 1

有不同的方法可以实现你想要的。

就像你会使用移动优先或桌面优先的方法来设计你的网站一样。

您可以尝试阅读有关RWD的链接

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

要了解有关RWD的更多信息，请阅读此链接

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

希望这能有所帮助。

Answer 2

您可以简单地使用border_bottom为该图像添加边距底部，这应该会模仿换行符。设置：

 @media only screen 
  and (max-device-width: 480px) {
    img {
            border-bottom: 1px solid #ccc;
            margin-bottom: 15px; 
         }
}

Answer 3

我也会看一看视口...

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

它可以让你缩小网站的规模，因此(通常)文本在手机等小型设备上更具可读性。