0

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

出于某种原因，当我在 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;

}

}

它似乎在浏览器中工作，只是在实际手机设备上查看时不起作用。

4

1 回答 1

1

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

由于您的最小宽度设置为特定像素，因此您遇到了一些问题。对于移动环境，您需要使用 % 以便它可以适应视口。一旦您将某些内容设置为 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 中定义它，但请记住您的视口。

我希望这有帮助！

于 2013-06-26T16:46:06.183 回答