jquery - 在移动/桌面模式之间切换时如何启用/禁用某些 css 属性？

Question

在 bootstrap3 的 RWD 页面中，如果我希望图像向右(或向左) float 并使文本环绕它，并且在移动模式下，禁用 float (或更改其他属性)值。如何实现？

例如，这是我想要的宽屏:

<div style="float:LEFT; width: 300px ; margin-right:10px; margin-left:10px; padding:1px">
  <div class="caption">
    <h3>image header</h3>
  </div>
  <img class="img-responsive" src="http://placehold.it/300x150">
  <div class="caption">This is image footer</div>
</div>
<p>Lorem Ipsum is simply dummy text of ...</p>

它工作正常。

但在移动设备中，我不想要“文字环绕图像”效果。 (因为如果图像很宽，则环绕文字太窄，难以阅读)。

我必须在 xs 模式下禁用 float 和 width 样式值。

但我不知道如何正确实现此功能。这是我能想到的，非常愚蠢:

<div style="float:LEFT; width: 300px ; margin-right:10px; margin-left:10px; padding:1px" 
     class="hidden-xs">
  <div class="caption">
    <h3>image header</h3>
  </div>
  <img class="img-responsive" src="http://placehold.it/300x150">
  <div class="caption">This is image footer</div>
</div>

<div style="margin-right:10px; margin-left:10px; padding:1px" class="visible-xs" >
  <div class="caption">
    <h3>image header</h3>
  </div>
  <img class="img-responsive" src="http://placehold.it/300x150">
  <div class="caption">This is image footer</div>
</div>
<p>Lorem Ipsum is ....</p>

它使用hidden-xs和visible-xs来实现这个效果，很笨。

欢迎任何有或没有 JS 的解决方案，非常感谢!

============================================= =====

已更新

我通过引入block_float_left和block_float_right类部分解决了这个问题，如下:

<div class="thumbnail block_float_left">
  <div class="caption"><h3>image header</h3></div>
  <a href="#" >
    <img class="img-responsive" src="http://placehold.it/300x150" />
  </a>
  <div class="caption">This is image footer</div>
</div>

它可能是 block_float_left 或 block_float_right 硬编码在 HTML 中。在 CSS 中，我定义了:

@media (min-width: 768px) {   
    .block_float_left {
        float:left;
    }

    .block_float_right {
        float:right;
    }
}

@media (max-width: 768px) {    
    .block_float_left {
        float:none;
    }

    .block_float_right {
        float:none;
    }
}

部分工作，因为它无法处理 width 属性。

Answer 1

您需要使用 media queries这样您就可以在不同的屏幕尺寸下更改代码。假设您只是想删除 float ，那么我会做这样的事情。

注意:我在示例中只使用了 700px 的任意大小，您可以根据需要更改它。

HTML:

<div>
  <img class="my-img" src="http://placehold.it/300x150">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eligendi dolorum aspernatur odio iusto natus autem deleniti dolores laboriosam consequuntur, sint veniam corporis quod voluptas eius consequatur tempora quidem culpa.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eligendi dolorum aspernatur odio iusto natus autem deleniti dolores laboriosam consequuntur, sint veniam corporis quod voluptas eius consequatur tempora quidem culpa.</p>
</div>

CSS:

.my-img {
  float:left;
}

@media (max-width: 700px) { 
  .my-img {
    float:none; 
  }
}

JSfiddle:here