Question

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

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

  .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;
}

我真的不知道如何实现这一点所以任何帮助都会受到高度赞赏。

Answer 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)">

Answer 2

试试这个：

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

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

Answer 3

如果您需要自适应网页，则需要使用媒体查询，您可以在此处查看一些标准网址：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

当应用css时，它们基本上会改变。

Answer 4

建议先从您的移动设备开始，然后使用min-width为大型设备添加其他样式作为媒体查询。我发现这种方法使计划和维护更容易。请查看this article以获取深入的教程。

当我最小化页面时，如何使我的网页响应

4 个答案: