响应式设计问题

Question

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

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

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

这是URL： 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屏幕和（最大宽度：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屏幕生效后，此功能将起作用。 http://jsfiddle.net/Enxu2/1/

您遇到了一些问题，因为您将最小宽度设置为特定像素。 对于移动的气氛，您需要使用％使其适合视口。 将宽度设置为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%
}

您还需要确保图像能够响应，因此还需要将其设置为％宽度。 如果图像具有最大宽度/高度，则始终可以在CSS中使用max-width：或max-height：对其进行定义，但请记住您的视口。

我希望这有帮助！