在手機上隱藏圖片

我有這個HTML標籤可以在頁面上放置任意圖片。在手機上隱藏圖片

<a href="example.com"><img src="https://example.com/wp-content/uploads/....186.png" width="133" height="13" style="float:right; margin-right: 100px; margin-top: 40px;" /></a>

但是，我不想在手機上看到這個圖像。這可以做到嗎？

來源

2017-04-08 Amit Jugran

你需要做一些研究CSS媒體查詢:) – Brett

請你嘗試任何例子提供。我們可以幫助你。 –

你應該看看媒體查詢： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

要隱藏圖像，你需要用display:none媒體查詢，其中僅包含在低分辨率。

@media only screen and (max-width: 500px) { 
    img { 
     display: none; 
    } 
}

編輯：這是不是一個好主意，定義你的風格內聯。您應該在您的header中使用單獨的css文件或至少使用<style>塊。這有助於控制不同的場景，並使樣式在多個對象和頁面上保持一致。

來源

2017-04-08 14:29:24 starick

這工作輝煌J.斯塔克！非常感謝！我會記住單獨的css文件的建議。再次感謝， –

最好鏈接到非w3schools資源，例如MDN。 [爲什麼]（https://meta.stackoverflow.com/questions/280478/why-not-w3schools-com）？ – Brett

感謝您的建議，我將在未來記住這一點。 – starick

最好先移動。爲您的圖片選擇課程。例如hide-mobile。然後編寫這些代碼：

.hide-mobile 
{ 
    display: none; 
} 
@media only screen and (min-width: 500px) { 
    .hide-mobile 
    { 
     display: block; 
    } 
}

來源

2017-04-08 14:42:13

不知何故，這不起作用薩利赫。但謝謝你的建議。 –

什麼時候不起作用？ –

在手機上隱藏圖片

回答

相關問題