-1

我想建立这个网站：http ://www.alsite.com.br/misskessi responsive...但我对响应式格式有些怀疑。

我想知道我需要对图像、链接、文本做什么...？我认为这是百分比，但有多少？..我怎么能看到我需要调整多少以适应分辨率....

示例：在我的分辨率（1600 x 900）上，这很好用：

#wrap{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-495px;
    margin-top:-359.5px;
    width:990px;
    height:719px;
    background-color: rgba(247, 8, 8, 0.2);
}

但在 1024x768 分辨率下，出现滚动条...所以我需要对此做出响应...

但如何？

谁能帮我？

4

3 回答 3

2

我希望这次我回答一个关于响应式设计的问题，这个问题不会被删除；）

响应式设计和百分比之间存在差异。
如果你想得到百分比，你必须在每个点上添加它们。目前，您将其置于屏幕中央，但您的宽度、高度和边距是固定的（以逻辑方式，而不是 css 方式）。您也必须将它们更改为百分比值。为了防止图像变大，您应该检查max-height/min-height属性（宽度，左侧等方式相同）

此外，这并不是真正的响应式，要使您的站点响应并适应甚至非常小的浏览器，您应该检查一下media queries（http://css-tricks.com/css-media-queries/和https://developer.mozilla.org /en-US/docs/Web/Guide/CSS/Media_queries）。这两个网站帮助了我很多，当我不得不在过去几周创建一个响应式网站时（http://wywy.tv/howimetyourmother）。

使用媒体查询，如果满足各种条件（大多数情况下是屏幕宽度），您可以修改您的 css 类，方法是将其放入您的 css 代码中，例如：

@media (max-width: 755px) {
  .content {
    width: 100%;
  }
  .header {
    margin: 0 auto;
  }   
  ...
}

你可以扩展这段代码，也许看看我开发的网站上的 css 文件，看看我做了什么以及它如何影响外观。

于 2013-06-24T18:28:21.760 回答
0

在构建响应式网站时，请记住以下几点。

  1. 使用媒体查询在您的设计中定义重要的断点。一些常见的断点是 <320px、<480px、<768px、>768px 及以上。

  2. 使您的布局流畅。如果有帮助，您可以使用网格系统 - 960 Grid System、Gridset、Columnal、Golden GS 等。

  3. 图像应设置为 100%，并具有最大宽度。也可以使用断点 - 您可以使图像相对于不同的断点改变位置。使用移动布局时，只保留基本图像并隐藏无用（不重要）的图像。

  4. 使用最大宽度/高度和最小宽度/高度。这些非常有用，因为它可以让您在几个小字符中定义“最低和最高”的宽度/高度。

  5. 对于移动布局，使您的列宽度为 100% - 您基本上将使用一列一直向下延伸。您将为此使用的媒体查询适用于 <320 像素的任何内容。

  6. 正如我上面所说 - 只保留基本内容。在更大的布局（>768-1024+）上，您可以使用精美的图像，但在此之下，请确保您首先考虑内容，然后再考虑精美的图像。这对于移动布局特别重要。

  7. 保持布局简单

  8. 不要忘记您的视口元标记。

    <元名称=“视口”内容=“宽度=设备宽度”>

于 2013-06-24T18:57:18.727 回答
-2

您可以将图像设置为背景图像并使用“背景尺寸：封面；”，它将其缩放到浏览器大小。

于 2013-06-24T18:26:53.693 回答