媒體查詢 - 使圖像響應

我有很多我的網頁上的圖像，並都與線路連接，這樣的：媒體查詢 - 使圖像響應

$ $ 
\/
    $  (Assuming $ is an image) 
/\ 
$ $

當我查看我的手機上這個網頁，圖像和線都是分散的。現在使用媒體查詢，我怎樣才能使圖像更小，以適應我手機的屏幕，並且圖像不會改變其位置。我只想改變它們的大小。

謝謝！

來源

2016-10-04 user6918687

使用媒體查詢非常簡單，只需使用@media和您想要的設備範圍即可。然後在裏面寫下你想申請該範圍的CSS。

img { 
    width: 500px; // current width 
    height: 500px; // current height 
} 

@media (max-width:767px){ 
img { 
    width: 200px; // new width for screen <768px 
    height: 200px; // new height for screen <768px 
} 
}

此外請確保您將以下代碼添加到您的html標記的頭部。

<meta name="viewport" content="width=device-width, initial-scale=1">

這一條線將確保您的網頁需要設備寬度的整個寬度，並重置縮放到1的任何設備，因此將幫助您爲您的移動設備訪問者適當觀察。

其他媒體查詢規則：

@media (min-width:768px and max-width:1199px){ 
    // code for device screen between 768 and 1200px 
} 

@media (min-width:1199px){ 
    // code for device screen larger than 1199px 
}

來源

2016-10-04 04:50:20

感謝基蘭:) ..有一個問題，我應該在哪裏把@media代碼？..在頁眉或身體？ – user6918687

而不是直接將其添加到您的HTML文件。將它添加到樣式表。如果style.css是你所寫的所有css文件，然後將它添加到那裏。或者你可以添加另一個名稱爲reponsive.css的文件並將其添加到那裏。請在這裏閱讀如何添加樣式到您的文檔：http://www.w3schools.com/css/css_howto.asp –

呀使用媒體查詢是簡單的一例如：

@media（最小寬度：100像素）和（最大寬度：1,024）

通過這種方式使用改變你的類或id這正是適合這個移動視圖

第二件事是不使用高度和寬度在PX而非％的人使用，則圖像也被基於THW視收縮

嘗試並恢復

來源

2016-10-04 04:57:49 Prathap

好吧Prathap會給它一個嘗試:) – user6918687

媒體查詢 - 使圖像響應

回答

相關問題