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

您可以使用border_bottom为该图像添加边距底部，并且应该模仿换行符。设置：

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

Answer 2

有不同的方法可以达到你想要的效果。

就像您将使用移动优先或桌面优先方法等设计您的网站。

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

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

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

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

希望这有帮助。

Answer 3

我也会查看视口......

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

它可以让您缩小网站，以便（通常）文本在移动电话等小型设备上更具可读性。

如何使用媒体查询来更改html

3 个答案: