响应式设计问题
响应式设计问题
提问于 2013-06-27 00: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和(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;
}
}它似乎只在浏览器中工作，而不是在实际的手机设备上查看。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-06-27 00:46:06
这将在@media screen生效时起作用。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%
}您还需要确保您的图像将是响应性的，因此您还需要将其设置为% width。如果你有一个图像的最大宽度/高度，你总是可以在css中使用max-width:或max-height:来定义它，但是要记住你的视窗。
我希望这能帮到你!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17325733
复制相关文章
相似问题
腾讯云开发者
