堆棧內存溢出
  簡體   English   中英

媒體查詢-640像素時頁面寬度會擴大

[英]Media Query - page width expands when at 640px

 原文  2014-05-21 21:09:19  2   2    html/ css/ media-queries

問題描述

我在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;
}

另一個斷點似乎很好！ 謝謝

2 個解決方案

解決方案1
 0  2014-05-21 21:15:10

關於我上面的評論，這是媒體查詢的外觀： 

/* 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;
    }
}

解決方案2
 0  2014-05-21 21:27:32

徽標的類別為.grid_4 ，導航欄的類別為.grid_8 ，這意味着在您的640px斷點處，其寬度設置為100% 。 再加上其邊距，這些邊距將使這些元素延伸到其父容器之外。

要解決此問題，您需要覆蓋將width設置為100%的規則。 在您的640px媒體查詢中添加： 

#logo, #nav {
    width: auto;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 @media (max-width: 640px) 不適用於移動設備 媒體查詢不適用於最大寬度的屏幕尺寸（640像素） 在IE11中將響應頁面寬度從640px調整為1117px會導致錯誤對齊 所選文字在640像素或更小的視口中逐漸消失 最大寬度設置為767px時的媒體查詢 為什么我的iPhone不能說出960px和640px樣式表之間的區別 Cordova iOS模擬器僅顯示320像素（我的內容為640像素） 主英雄向左擠壓下方的內容-自適應設計-640px以下 元素在媒體查詢中的位置很好：380像素-但是從較大的寬度調整為380像素時不能定位 CSS替換最小寬度為1px的媒體查詢
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM