Question

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

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

为例：在我的决议（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分辨率下，会出现滚动条...所以我需要响应这个......

但是如何？

任何人都可以帮助我吗？

Answer 1

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

响应式设计与百分比之间存在差异如果你想要百分比，你必须在每个点添加它们。目前，您将它放在屏幕中心，但您的宽度，高度和边距是固定的（以逻辑方式，而不是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文件，看看我做了什么以及它如何影响外观。

Answer 2

在构建自适应网站时，请注意以下几点。

使用媒体查询在您的设计中定义重要的断点。一些常见的断点是<320px，<480px，<768px，> 768px及以上。
让您的布局流畅。如果它有帮助，您可以使用网格系统 - 960网格系统，网格集，柱状，黄金GS等
图片应设置为100％，最大宽度。也可以使用断点 - 您可以使图像相对于不同的断点更改位置。使用移动布局时，只保留基本图像并隐藏无用（非重要）图像。
使用最大宽度/高度和最小宽度/高度。这些非常有用，因为它允许您在几个小字符中定义“最低和最高”宽度/高度。
对于移动布局，您的列宽度为100％ - 您基本上将使用一列横跨的列。您将使用的媒体查询适用于任何＆lt; 320px。
正如我上面所说 - 只保留基本内容。在更大的布局（＆gt; 768-1024 +）上，您可以使用您喜欢的图像，但在此之下，请确保您首先考虑内容并将其视为第二个。这对移动布局特别重要。
保持简单的布局
不要忘记您的视口元标记。

＆LT; meta name =“viewport”content =“width = device-width”＆gt;

Answer 3

您可以将图片设为背景图片并使用“background-size：cover;”，将其缩放到浏览器尺寸。

响应式布局问题

3 个答案: