响应式图像和div内容CSS和HTMl

Question

我正在处理一个自适应的html页面，我有这段代码可以隐藏一些内容，并在移动设备上查看或最小化网络浏览器时设置长图像。

CSS

<span id="giftFee"></span> You are eligible to send gifts of up to 0 items, you have 0 items.

HTML

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

Answer 1

使用max-width代替max-device-width您也可以从inline style删除element并将其写入<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/