个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 10:24:30 25 4
gpt4 key购买 nike

我在 640px 处遇到断点问题。由于某种原因，页面宽度在 640px 处中断时会变大，并在右侧形成一个巨大的间隙，几乎就像那里有边距一样。从它的外观来看，问题在于 Logo 大小。浏览器认为它比实际更宽。希望代码可以为您清除它，以便您可以看到我在说什么...

    <!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;
}

另一个断点好像没问题!谢谢

最佳答案

关于我上面的评论，媒体查询应该是这样的:

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

关于html - 媒体查询 - 页面宽度在 640px 时扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23793838/

25 4 0
文章推荐： css - 如何获取最后一个子 *ngFor 组件列表
文章推荐： javascript - 包含图像路径 (uri) 和标题的数组
文章推荐： javascript - Facebook Javascript SDK 在流发布期间导致 IE8 上的 XSS 阻止
文章推荐： jquery - 获取一行中列的宽度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com