我应该为这种响应式设计使用 javascript 吗？ [关闭]答案

【问题标题】：Should I use javascript for this responsive design? [closed]我应该为这种响应式设计使用 javascript 吗？ [关闭]
【发布时间】：2014-01-17 06:46:05
【问题描述】：

我正在重建我的个人网站，我有两个元素并排浮动，第一个是 80%，第二个是 20%。

http://codepen.io/anon/pen/xgask

SCSS

.container
  width: 80%
  margin: 0 auto
  outline: 2px solid green
  overflow: hidden /* Only used this here as a clearfix */

.text, .avatar
  float: left

.text
  width: 70%
  outline: 1px solid red

.avatar
  width: 25%
  margin-left: 5%
  outline: 1px solid blue

  img
    display: block
    max-width: 100%

HTML

<div class="container">
  <div class="text">
    <p>Lots of text ...<p>
    <p>Lots of text ...</p>
  </div>
  <div class="avatar">
    <img src="http://www.foxprime.net/wp-content/uploads/2013/08/gravity-max-roller-coaster.jpg" />
  </div>
</div>

在完美的桌面尺寸上。如果第一个元素中的文本比第二个元素中的图片长，则文本不会在下面换行，这就是我想要的。

但是，在移动尺寸上，我希望文本元素是全宽的，并且图片可以向右浮动，以便文本环绕。

因为它们是两个独立的元素，这是不可能的，所以使用 javascript 和 enquire.js 之类的东西来响应媒体查询然后分离图片并将其放置在文本元素的开头并具有一种让它正确浮动的样式。

我知道如何全部编码，没有问题，只是问是否适合使用一点点 javascript 来帮助我获得我想要的响应式布局？

【问题讨论】：

你确定这不可能只用 CSS 吗？也许提供一些代码和一个 JsFiddle
@ScottSimpson 我非常确定这一切都可以通过 css 媒体查询来实现。
在下面查看我的评论。

标签： javascript css responsive-design media-queries enquire.js

【解决方案1】：

使用响应式网页设计，有许多种方法来完成同样的事情；没有一种方法是正确的。

就我个人而言，我会尝试制定一个纯 CSS 解决方案或一个重新组织我的 HTML 标记以尽我所能达到预期结果的解决方案。只有当我用尽了所有选项来制作纯 CSS/标记的解决方案时，我才会转向 JavaScript。

换句话说，是的，如果 JavaScript 能够达到您的最终结果，它就是合适的。但是，如果可以通过标记/CSS 操作而不使用 JavaScript，那总是是更好的选择。

【讨论】：

好吧，我就是这么想的。我在这里隔离了我在 CodePen 上用于桌面的布局示例：codepen.io/anon/pen/xgask 我不希望最终结果太 hacky。我基本上需要（对于移动设备） .avatar 元素从 .text div 中向右浮动，以便文本从图像的左侧向下流动并包裹在下方。有什么想法吗？
这里：jsfiddle.net/B325p 它不能在小提琴中正确呈现（我不知道为什么），但是将该代码放入一个简单的 HTML 文件中，它会按预期工作。我在 Firefox、Chrome 和 Safari 中进行了测试。

【解决方案2】：

如果您不介意将 .avatar 列放在首位，您可以获得所需的确切结果。否则，如果只是一张图片，我会用 CSS 隐藏和显示。通常我会避免使用 jQuery，除非它是绝对必要的，并且在 3 年的响应式东西之后，你会知道什么时候使用它，什么时候不使用它。

http://codepen.io/anon/pen/nfvmj

这是移动优先。

将 .avatar 放在 html 中的 .text 之前：

.container {
    margin: 0 auto;
    width:90%;
    outline: 2px solid green;
      overflow: hidden;
        /* Only used this here as a clearfix */
}
.text {
    outline: 1px solid red
}
.avatar {
    float: right;
    width: 50%;
    margin:0 0 2% 2%;
}
.avatar img {
    max-width: 100%
}
@media (min-width:600px) { 
    .text {
        width: 70%;
        float: left;
    }
    .avatar {
        float: right
    }
    .container {
        width: 80%;
    }
    .avatar {
        width: 25%;
        margin: 0 0 0 5%;
    }
}

【讨论】：