如何使用媒體查詢來更改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

您可以使用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

它可以讓您縮小網站，以便（通常）文本在移動電話等小型設備上更具可讀性。