1

您好，在我的网站上，我有一个 100% 宽度的页眉/页脚包装器，这与其他的 bg 图像不同，但是当我在移动设备上访问该网站时，它只会拉伸 90% 的宽度，我m 在将站点转换为我最近开发的响应式网格系统的过程中，因此当前版本只能再使用几周，但这是我宁愿修复的东西，任何人都知道这是怎么回事？URL：jp creative vision CSS for header

#header{
padding: 0;
height:60px;
width:100%;
background-image:url(../images/general/background_top.jpg);
-webkit-box-shadow: 0px 0px 50px 5px #000000;
-moz-box-shadow: 0px 0px 50px 5px #000000;
box-shadow: 0px 0px 50px 5px #000000;
}
    #nav{
        margin: 0 auto;
        padding-top:0;
        width:1000px;
    }
        #nav ul{
            float:right;
        }
        #nav li {
            display: inline-block;
        }
        #nav li a, #nav li a:visited {
            box-sizing: border-box;
            color:#FFFFFF;
            display: block;
            padding: .31em .60em;
            transition: border 1s ease-in-out;
            -moz-transition: border 1s ease-in-out;
            -webkit-transition: border 1s ease-in-out;
        }
        #nav li a:hover, #nav li a:active, #nav li a:focus {
            border-bottom: solid 10px #336699;

        }
        #nav ul:last-child{
            margin-right:0px;
            padding-right:0px;
        }

有谁知道我的问题是什么？谢谢您的帮助 ：）

编辑，问题是页眉和页脚中的包装器应该伸展 100% 只在手机上做 90%。

4

2 回答 2

0

我一直在为这个问题苦苦挣扎。使用此元代码阻止移动设备缩小。希望这可以帮助。

<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />

顺便说一句，我一直在浏览您的网站，确实太多的文字无法快速向访问者发送消息。使用更多图像，因此用户必须尽可能少做。

于 2013-09-29T16:57:05.903 回答
0

首先做一个

*{
margin:0px;
padding:0px;
}

在您的样式表中。那么这就是最小宽度为 900px 的媒体查询的样式

media="screen and (min-width: 900px)"

尝试处理较小的宽度。

width:100%并且还以全局风格为身体做一个。然后继续媒体风格。您也可以在调整浏览器大小时看到效果 :) 尝试测试很多工作要做。

于 2013-09-29T16:15:58.127 回答