2016-05-29 38 views
0

我正在响应html页面,我有这段代码来隐藏一些内容,并设置一个长时间的图像,当在移动中查看或当您的web浏览器最小化。响应式图像和div内容CSS和HTMl

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"/> 
+0

使用'max-width'而不是'max-device-width'。 – Mohammad

回答

0

使用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/