-1

嗨，我有一个页面，我将图像放在页面左侧，将描述放在页面右侧。我将条款内容放在图像和描述内容下方。现在当我最小化时，我只能看到适合屏幕的部分描述内容。但是我想要的是当我最小化时，描述应该低于图像，术语应该低于描述。

这是我放在身体左侧的图像类：

  .appPreview {
  max-width: 300px;
  height: 300px;
  border: 1px solid #cecece;
  margin-left : 55px;
  }
 span.grey {
 color: #cecece;
  }

这是我在身体右侧放置描述的课程：

 .right_content
    {
        float: left;

        border: 1px solid #CCC;
        width: 400px;
        margin-top : -520px;
      padding-bottom : 150px;
    }

这是我在图像和描述下方放置术语的课程：

div.MoreInfoterms {
width : 850px;
margin-right : 250px;
margin-left : 55px;
margin-top : 20px;
border: 1px solid #cecece;
background-color: #f7f9f9;
max-height:700px; 
margin-bottom : 20px;
}

我真的不知道如何实现这一点所以任何帮助将不胜感激。

4

4 回答 4

1

您可以通过简单地创建最小/最大尺寸边界来设置任意数量。

<link rel="stylesheet" href="/path/to/small.css" type="text/css" media="only screen and (max-width:800px)">

<link rel="stylesheet" href="/path/to/medium.css" type="text/css" media="only screen and (min-width:801px) and (max-width:1000px)">

<link rel="stylesheet" href="/path/to/large.css" type="text/css" media="only screen and (min-width:1001px)">
于 2013-11-11T14:34:09.110 回答
1

尝试这个：

@media screen and (max-width: 1024px) {
   .appPreview {
      display: block;
   }
   .right_content {
      float: none;
   }
   div.MoreInfoterms {
      width: 100%;
   } 
}

您应该使用百分比而不是 px。

于 2013-11-11T14:34:16.547 回答
1

如果你想要一个响应式网页，你需要使用媒体查询，你可以在这里看到一些标准的：http: //css-tricks.com/snippets/css/media-queries-for-standard-devices/

当应用放入其中的 css 时，它们基本上会发生变化。

于 2013-11-11T14:35:22.667 回答
0

建议先从您的移动样式开始，然后使用min-width. 我发现这种方法使事情更容易计划和维护。查看这篇文章以获得深入的教程。

于 2013-11-11T14:38:44.743 回答