响应式设计问题答案

【问题标题】：Responsive Design Issue响应式设计问题
【发布时间】：2013-06-26 16:36:14
【问题描述】：

我在使用响应式设计时遇到了一些问题。我尝试创建的第一个。

由于某种原因，当我在 iPhone 上查看该网站时，所有内容都被放大了。

我想要的是；在桌面站点上，徽标将位于“.container”的左侧，在 iPhone 上查看时，图像将直接位于中间。

这是网址：http://markpetherbridge.co.uk/peak。

我已将其添加到 html 标头中：

 meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

这是相关的 CSS：

<div class="wrapper">
    <div class="container" id="header">
        <div id="peak-logo">
            <img src="img/peak-logo.png" alt="Peak Architects" />
        </div>
    </div>
</div><!-- end.Header !-->

我的桌面 CSS 是：

/* structure */

body {
font-family: "Calibri", Helvetica, Arial, Sans-Serif;
font-size:  16px;
color: #8d8c8c;
}

.wrapper {
float: left;
top: 0px;
left: 0px;
width: 100%;
background-color: #333; 
}

.container {
position: relative;
width: 1000px;
height: 100px;
background-color: #ccc;
margin: 0 auto;

}

手机的 CSS 是： @media screen and (max-width: 480px) {

body {

}
.wrapper {
    max-width: 480px;
}
.container {
    width: 100%;
    max-width: 480px;
}

#peak-logo {
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    width: 200px;
    min-width: 480px;   
    margin: 20px 0;

}

}

它似乎在浏览器中工作，但在实际手机设备上查看时却不行。

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

这将在@media screen 生效时起作用。 http://jsfiddle.net/Enxu2/1/

由于您的最小宽度设置为特定像素，您遇到了一些问题。对于移动环境，您需要使用 % 以便它可以适应视口。一旦您将某些内容设置为 width: 100%，您需要注意您的左右边距和填充，因为它可以将元素移动到它们应该在的位置之外，并允许用户在您的页面上放大和缩小，而不是完美契合.如果您在定义的边界之外有一些元素，可以尝试将一些宽度：100% 更改为宽度：95% 甚至 90%，这是解决此问题的一种简单方法。这应该可以让您查看是哪些元素导致了问题。

在提供的 jsfiddle 中，我更改了一些宽度和一些边距。我希望这能帮助您走上正轨！

#peak-logo {
display: block;
margin: 0 auto;
text-align: center;
position: relative;
width: 100%;
min-width: 100%; 
}

.wrapper {
width: 100%;
}
.container {
width: 100%;
}
.container img {
width: 100%
}

您还需要确保您的图片具有响应性，因此您还需要将其设置为 % 宽度。如果您有图像的最大宽度/高度，您始终可以使用 max-width: 或 max-height: 在 css 中定义它，但请记住您的视口。

我希望这会有所帮助！

【讨论】：