首页 文章

宽度：100％没有填满移动设备上的屏幕

提问于
浏览 次
2

我努力让网站的页脚合作 . 该网站在这里：http://whitehallrow.com/

在移动设备上加载时，主体的宽度会根据屏幕大小缩小，并将所有包含的文本包含在其中 . 然而，页脚保持其宽度，我理解这是因为宽度硬编码在计算机屏幕上看起来很好 . 我在CSS中制作了一个媒体查询，目标是屏幕宽度为500像素或更小的设备，以便让页脚调整到身体的宽度 . 这是我一直在调整的CSS片段：

@media screen and (max-width: 500px) {
#customfooter{
        width:100%;
}
}

无论出于何种原因，这都行不通 - 它仍然表明页脚比身体宽得多 . 我试过max-width：100％，width：auto; max-width：auto，并且都不起作用 .

如何在没有硬编码的情况下实现这一目标？

css mobile width screen compatibility

2 回答

  • 2

    从中更改CSS

    #teakfooter {
    width: 100%;
}
#verybottom {
    width: 100%;
}

    添加一个类，以便获得更高的优先级

    .page #teakfooter {
    width: 100%;
}
.page #verybottom {
    width: 100%;
}

    我用Firebug试了一下它似乎工作得很好 .

    编辑：在评论中再考虑几件事之后，我注意到了一些导致页脚无法填写的内容 .

    .site {
    padding: 0 1.71429rem;
}

    这导致#customer页脚在两侧都有填充 .

    #teakfooter {
    margin-left: -40px;
}

    这导致#tefootfooter在右侧有空格 .

    回复于
  • 0

    同样在firebug中你可以检查METRICS（在右栏中你有Computed Styles，Styles，Metrics等） . 在METRICS你会看到身体周围有一个 padding: 24px;

    解：

    body {
  padding: 0; 
}
    回复于

相关问题