html - 简单的响应式设计\最佳实践

Question

考虑两个 inline-block div。现在，我希望当用户减小浏览器大小时，只有一个 <div>将保持可见(而不是 <div> 转到下一行...)。

我该如何实现？

<style>
    div {
        display:inline-block;
    }
</style>
<div id="first">this should dissapear on narrowing browser</div>
<div id="second">only this should be visible</div>

我使用 Polymer，所以如果这里有一些语法糖就好了 :)

Answer 1

试试这个! http://jsbin.com/bibuzu/1/edit

在 480px 处有一个断点，因此第一个 div 之前的任何宽度都设置为不显示，第二个 div 占据剩余的空间。

@media screen and (max-width: 480px) {
  div.first {
    display: none;
  }

  div.second {
    width: 100%;
  }
}