html - 响应式设计问题

Question

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

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

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

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

我已将其添加到 html header 中:

 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 屏幕和(最大宽度: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;

}

}

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

Answer 1

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

由于将最小宽度设置为特定像素，您遇到了一些问题。对于移动环境，您需要使用 % 以便它可以适应视口(viewport)。一旦你设置了 width: 100% 你需要注意你的左/右边距和填充，因为它可以将元素移动到它们应该在的位置之外，并允许用户放大和缩小你的页面而不是完美适合.如果您在定义的边界之外有一些元素，您可以尝试将一些 width:100% 更改为 width: 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 中定义它，但请记住您的视口(viewport)。

希望对您有所帮助!