Question

我遇到640px的断点问题。出于某种原因，当页面宽度在640px处突破并且向右边形成一个巨大的间隙时，页面宽度会增大，几乎就像那里有一个边缘。从表面上看，问题就是徽标大小。浏览器认为它比实际更广泛。有条不紊地代码可以为你清除它，这样你就可以看到我在说什么......

    <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Webbit Design</title>
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
</head>

<body>

    <div class="container clearfix">
        <div id="logo" class="grid_4">
            <a href="index.html"><img src="img/webbit-logo.png" alt=""></a>
        </div>
        <div id="nav" class="grid_8 omega">
            <ul>
                <li class="home"><a href="index.html">Home</a></li>
                <li class="detail"><a href="about.html">About</a></li>
                <li class="work"><a href="work.html">Work</a></li>
                <li class="contact"><a href="contact.html">Contact</a></li>
            </ul>
        </div>

        <div id="intro-home" class="grid_12">
            <h1>Welcome</h1>
            <p>Bblah blah.  <p></p>
        </div>



        <div id="copyright" class="grid_12">
            <p>© Webbit Design. All Rights Reserved.</p>
        </div>

    </div>

</body>
</html>

/*global*/

body {
    font-family: 'Oxygen', sans-serif;
    font-size: 0.8em;
    line-height: 25px;
    background: #fff;
    color: #000000;
    margin: 3em 6.5em;
}

a {
    color: #444;
    text-decoration: none;
}

a:hover {
    color: #50B748;
}



/*typography*/

h1 {
    font-size: 4em;
    font-weight: bold;
    letter-spacing: -0.05em;
    margin: 0;
    line-height: 0.8em;
}

h2 {
    font-size: 2.3em;
    font-weight: normal;
    letter-spacing: -0.05em;
    margin: 0;
}
}
h3 {
    font-weight: 100;
    font-size: 1.125em;
    color: #444;
}

p {
    font-size: 1em;
    line-height: 25px;
    font-weight: lighter;
}



/*navigation*/
#logo {
    margin: 5% 0 1% 38.6%;

}


#nav {
    margin-left: 34%
}
#nav ul {
    width: 100%;
    margin: 8% 0 30 90;
    list-style: none;
    float: right;
    }
#nav ul li {
    float: left;
    }
    #nav ul li.home {
        width: 15%;
    }
    #nav ul li.detail {
        width: 15%;
    }
    #nav ul li.work {
        width: 15%;
    }
    #nav ul li.contact {
        width: 15%;

    }

    }
#nav ul li a {
    color: #444;
    display: block;
    text-decoration: none;
    }

    #nav ul li a:hover {
color: #50B748;
    }

/*content*/

p .quote{
    font-style: italic;
}

img .quote-close{
    margin-left: 50px;
}


}
#new-work {
    margin-top: 2%;
}

#new-work img {
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    padding: 8px;
    margin: 0 0 0% 0;
}


#featured-work {
    margin-top: 2%;
}
#featured-work img {
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    padding: 8px;
    margin: 0 0 0% 0;
}
#contact {
    margin-top: 2%;
    clear: both;
    border-top: 1px solid #aaaaaa;
}
#contact span{

    color: #50B748;
    font-weight: 600;
}

#copyright {
    border-top: 1px solid #aaaaaa;
    padding: 2% 0;
    margin: 2% 0;
    margin-left: 1%;
    text-align: center;
}

/* Form */
#form {
    width: 90%;

    background: #EEE;
    padding: 20px 30px 20px 30px;
    color: #444;
    border:1px solid #DADADA;
}

}
#form h1>span {
    display: block;
    font-size: 11px;
}
#form label {
    display: block;
    margin: 0px 0px 5px;
}
#form label>span {
    float: left;
    width: 80px;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
#form input[type="text"], #form input[type="email"], #form textarea,#form select{
    border: 1px solid #DADADA;
    color: #888;
    height: 24px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 3px 3px 3px 5px;
    width: 70%;

}

#form textarea{
    height:100px;
}
#form .button {
    background: #50B748;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #FFF;
}
#form .button:hover {
    background: #444
}

/*Work*/

.work-img {
    margin-top: 20px;
    max-width: 100%;

}

.line {

}

/*media queries*/

/* Tablet ----------- */
@media screen and (max-width: 1024px) {

.container {
    margin-right: 0;
}

#intro {
    width: 100%; 
}

#intro h1 {
    margin:  0 0 0% 0;

}
#logo img {
margin-left: -16%;
margin-bottom: -15%;
}

#nav ul {
}

#nav ul li {
    float: left;
    margin: 5% 0 0 -2.5%;
    }
    #nav ul li.home {
        width: %;
    }
    #nav ul li.detail {
        width: %;
    }
    #nav ul li.work {
        width: %;
    }
    #nav ul li.contact {
        width: %;
    }


}


/* Small ----------- */
@media screen and (max-width : 640px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    width:100%;
}

.container {
    margin-right: 0;
}
#logo img {
max-width: 100%;
margin-right: 0;
}
#nav ul {
    font-size: 1.2em;

}

#nav ul li a {
    -webkit-user-select: none;
    font-size: 0.750em;
}

#nav ul li {


    }
    #nav ul  li.home {
        width: 10%;
        text-align: center;
    }
    #nav ul  li.detail {
        width: 20%;
        text-align: center;
    }
    #nav ul  li.work {
        width: 10%;
        text-align: center;
    }
    #nav ul  li.contact {
        width: 20%;
    text-align: center;
    }


#featured-work, #new-work {
    margin: 5% 0;
}

h1 {
    line-height: 0.7em;
}

另一个突破点似乎没问题！感谢

Answer 1

关于我上面的评论，这就是媒体查询的样子：

/* Small ----------- */
@media screen and (max-width : 640px) {

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
        width:100%;
    }

    .container {
        margin-right: 0;
    }
    #logo img {
    max-width: 100%;
    margin-right: 0;
    }
    #nav ul {
        font-size: 1.2em;
    }

    #nav ul li a {
        -webkit-user-select: none;
        font-size: 0.750em;
    }

    #nav ul li {

    }
        #nav ul  li.home {
            width: 10%;
            text-align: center;
        }
        #nav ul  li.detail {
            width: 20%;
            text-align: center;
        }
        #nav ul  li.work {
            width: 10%;
            text-align: center;
        }
        #nav ul  li.contact {
            width: 20%;
        text-align: center;
        }


    #featured-work, #new-work {
        margin: 5% 0;
    }

    h1 {
        line-height: 0.7em;
    }
}

Answer 2

徽标具有类.grid_4，导航栏具有类.grid_8，这意味着在您的640px断点处，其宽度设置为100%。加上它们的边距将使这些元素延伸到其父容器之外。

要解决此问题，您需要覆盖将width设置为100%的规则。在640px媒体查询中添加：

#logo, #nav {
    width: auto;
}

媒体查询 - 页面宽度在640px时扩展

2 个答案: