Question

所以，我基本上想在我的网站上为一个页面设置两种不同的布局。

低于400px：

[图像]

描述
[图像]

描述

对于400px以上：

[image] description
[image] description

（因此，图像和文字在同一行）

我知道如果我的断点是预定义的断点之一，我可以很容易地使用Bootstrap这样做，但事实并非如此。那么，最好的方法是什么？我是否仍然可以使用Bootstrap网格系统并以某种方式“破解”它或完全做其他事情？

谢谢！

Answer 1

这是一个片段

/*screen width over 400px*/
@media (min-width: 401px){
img {
  width:50px;
  height:50px;
  }
p{
  display:inline;
}
}
/*screen upto 400px*/
@media (max-width: 400px){
img {
  width:100px;
  height:100px;
  }
}

<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSSHCRPXAtpOWvSaR4T5ecblzIT-RdIV19VjNB4uUPPnEq_UT5r'>
<p id='p1'>
description
</p>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEaoUONNbTby87bfUNcRrdufGcaLSbDnC3SGSqKLk1ZwNFMEE3'>
<p id='p2'>
description
</p>

Answer 2

好的，你必须使用媒体查询。以下是我写的一些例子。

媒体查询是一组具有特定屏幕尺寸条件的样式（您设置的样式）。

当满足此屏幕大小条件时，媒体查询中给出的样式将覆盖与媒体查询之外的样式相矛盾的任何其他样式。

这是一个例子

getApplicationContext()

getApplicationContext()

这是媒体查询的基本语法首先制作@media，然后添加一个屏幕大小条件（max-width：1000px）或（min-width：500px），这是一个使用max-width的示例。然后，在媒体查询中添加样式。（别忘了关闭媒体查询！）

Context

@media (max-width: 500px) {

  #visible {

    display: none;

  }
  
 

}

现在运行上面的代码片段，当屏幕尺寸超过1000像素时，您会看到标题会出现，当屏幕尺寸低于1000像素时，它会消失并显示隐藏的短语。

以下是媒体查询Media Queries

的教程

Answer 3

您正在寻找的是css媒体查询。请查看此页面以获得深入解释http://www.w3schools.com/cssref/css3_pr_mediaquery.asp。

或者，在您的情况下，看起来您只是想在视口变得太窄时将描述包装到下一行。如果是这种情况，那么就不需要添加额外的标记，因为您可以只利用内联块元素的自然行为。此链接将为您http://www.w3schools.com/css/css_inline-block.asp阐明内联块元素的行为。

Answer 4

我会这样做，使用行结构。

它会给你一些更多的选择，当你/如果你想要3 img / text排队，或者......等等，迟早可能是一个标题，也许是一个页脚。

.header {
  padding: 10px;
  border-bottom: 1px solid #999;
}

.container {
  padding: 10px;
  white-space: nowrap;
}

.container .row {
  margin-bottom: 10px;
}

.container .row span {
  margin-left: 10px;
}

.container .row.at-top span {
  vertical-align: top;
}

@media (max-width: 400px){
  .container .row span {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }
  
}

<div class="header">
  <div class="row">
    Header
  </div>
</div>
<div class="container">
  <div class="row at-top">
    <img src="http://lorempixel.com/200/100/sports" />
    <span> Some text ... being aligned at top</span>
  </div>
  <div class="row">
    <img src="http://lorempixel.com/200/100/city" />
    <span> Some text ... or at bottom</span>
  </div>
</div>

响应式CSS-不同大小的不同布局

4 个答案: