響應式圖像和div內容CSS和HTMl

Question

我正在響應html頁面，我有這段代碼來隱藏一些內容，並設置一個長時間的圖像，當在移動中查看或當您的web瀏覽器最小化。

CSS

@media only screen and (max-device-width: 480px) { 
    .mobile_only { 
     width:600px !important; 
     overflow:visible !important; 
     float: none !important; 
     } 
    } 

HTML

<div class="mobile_only" style="width:0px; overflow:hidden;float:left">test</div> 
<img src="longimage.png" title="hide me in mobile thanks"/> 

Answer 1

使用max-width代替max-device-width你也可以從element刪除您inline style，並把它寫在你的<style>

.mobile_only{ 
    width:0px; 
    overflow:hidden; 
    float:left; 
} 

@media only screen and (max-width: 480px) { 
    .mobile_only { 
    width:600px !important; 
    overflow:visible !important; 
    float: none !important; 
    } 
} 

https://jsfiddle.net/uvmpde98/