响应式 html div 元素？

Question

我有 3 个 HTML div 元素，我希望在宽屏幕上并排显示这些元素，但是随着屏幕宽度的缩小，我希望看到它们变得垂直。

例如...

宽屏：

-----------
abc def ghi
-----------

窄屏：

abc
def
ghi

目前，三个 HTML div 如下所示（在另一个 div 块中）仅垂直放置...

<div id="Master_Div">
  <div id="Div_1">
    <p>abc</p>
  </div>
  <div id="Div_2">
    <p>def</p>
  </div>
  <div id="Div_3">
    <p>ghi</p>
  </div>
</div>

也许，答案与媒体查询有关and/or响应式设计，但我不确定。

感谢您提供的任何帮助。

Answer 1

是的，media queries 允许您控制移动屏幕的布局，例如：

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

 /* stack vertically */

}

Answer 2

一个简单的媒体查询就可以做到这一点。

/* Apply inner styles if the viewport's width is at least 500px */
@media (min-width: 500px) {
  .responsive {
    width:33.3333%;
    float:left;
  }
}

<div id="Master_Div">
  <div class="responsive" id="Div_1">
    <p>abc</p>
  </div>
  <div class="responsive" id="Div_2">
    <p>def</p>
  </div>
  <div class="responsive" id="Div_3">
    <p>ghi</p>
  </div>
</div>

Answer 3

您的问题最好通过自然设计模式解决，而无需诉诸媒体查询。以这种方式考虑，如果您使用 css float:left; 并排布置您的列，并且您为每列定义了一些 min-width 值。然后一旦屏幕宽度变得小于您定义的宽度值 X 3 ，您的列将垂直布局

Answer 4

我会这样做，除非你真的需要申请一个 ID，类对于多个 div 在 css 中有一个分配更容易，而且它们占用更少 space .

html---
<div class="wrapper">
   <div class="third">Something here</div>
   <div class="third">Something here</div>
   <div class="third">Something here</div>
</div>

css---
.third {
    width: 33.333333%
    float:left;
}
@media screen and (max-width: 767px) {
.third {
    width: 100%;
    float:none;
}
}

响应式 html div 元素？

Responsive html div elements?

html

css

media-queries

responsive-design