在移动网站上调整大小的问题

【问题标题】：Problems with sizing on mobile site在移动网站上调整大小的问题
【发布时间】：2014-04-17 10:15:46
【问题描述】：

我目前正在为功能齐全的桌面网站开发移动网站。使用媒体查询，我可以在 iPhone 或 iPod 等显示器上缩小实际内容区域的大小。但是，页脚和页眉等页面的其余部分不想正确缩小。有什么建议吗？您可以在此处查看该网站：www.tobynews.com

【问题讨论】：

您是否在页眉/页脚/其他元素上使用了任何内联样式（在 HTML 标记中为
）？如果是这样，它们将优先于任何 CSS 规则。此外，请注意媒体查询的顺序。在某些情况下，较低的规则优先于较高的规则！

标签： html css

【解决方案1】：

页脚如果有效，正文则无效

使用% 和min 或max

#content {
    /*you css*/
    margin-left: auto;
    margin-right: auto;
    width: 900px;/* use % for size
    max-width: you size;
    min-width: you size;*/
}

图像自动

body{
    background-image: url(uno.jpg);
    background-attachment: fixed;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    /* and you css*/
}

检测到的屏幕尺寸

@media screen and (max-width: 750px){
  footer{
    width: /*you size*/;
  }
}

【讨论】：