响应式设计问题

Question

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

出于某种原因时，我认为在我的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屏幕和（最大宽度：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％，你需要意识到你的左/右边距和填充，因为它可以将元素移动到他们应该在的位置以外，并且允许用户放大和缩小页面，而不是完全拟合。一个简单的方法来解决这个问题，如果你有一些元素在你定义的边界之外，你可以尝试改变一些宽度：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中定义：但请记住您的视口。

我希望这有助于！