Question

有一个奇怪的问题，即网页中断布局调整浏览器大小/通过移动设备访问时/切换到较低分辨率时（800 * 600/1024 * 768）

临时链接：http://krishnaspirit.hostoi.com/

P.S：全宽网站＆amp;适用于 1366 * 768 。

CSS：

    * { padding:0px; margin:0px; }
    p,h1,h2,h3,h4,h5,h6,a{ font-family: 'Armata', sans-serif; }

    /*header*/

    .header {  z-index:5000; position:fixed; top:0px; width:100%;  min-width:960px; height:100px; background-color:#4E4E56;}
    .header #nav li:last-child { margin-right:0px; }
    .header #nav li {  transition:1s ease all;line-height:40px; 
    display:inline-block; margin-right:3px; width:116px; height:40px;text-align:center; border-radius:5px;}
    .header #nav li a {  font-size:15px; color:#DCD0C0; display:block; height:100%; text-decoration:none; }
    .header #nav li:hover {  background-color: #DA635D; }
    .header #nav li a:hover { color:#fff; }
    .header #nav  {  position:absolute; right:10px; top:35px; width:600px; }
    .current {background-color: #DA635D; cursor:none;}
    .header #nav .current a { color:#fff; }
    .header .logo img {width:100px; height:95px;  position:absolute; top:5px; left:12px; line-height:100px; font-size:40px; color:#fff;}
    .header .logo .name { font-size:40px; color:#ccc; 
    font-family: 'Armata', sans-serif; position:absolute; left:110px;top:29px; }

    /*sub-head*/
    .sub-header .top-logo { float:left; }
    .sub-header .top-name { float:right; font-size:30px; padding-top:120px; color:#003366; } 
    .sub-header {  width:85%; text-align:center; margin:150px auto; }


    /*main-body*/
    .content  { float:left; }
    .news { float:right; margin-right:5px; }
    .news {   box-shadow:3px 3px 5px #ccc; padding:0px;  border-radius:3px; }
    .news p { font-weight:bold; font-size:15px; padding-bottom:20px;}
    .news {  border:1px solid #ccc; width:27%;  min-width:27%; padding:5px; height:300px;}
    .news .news_body { padding:3px; text-align:center;}
    .content { box-shadow:3px 3px 5px 0px #ccc; width:70%; height:300px; border-radius:3px; margin-left:5px; border:1px solid #ccc; font-size:15px;  padding:5px;}
    .content .sub-main { margin-top:15px;  text-align:justify; padding:10px; }
    .content #myMenu { width:100%; text-align:center; height:30px;  }
    .content #myMenu{ list-style-type:none; }
    .content #myMenu li {  border-bottom:1px solid #ccc; color:#999; display:inline-block; width:30%; line-height:30px;}
    .content #myMenu li:hover { font-weight:bold; }
    .content #myMenu li a {   display:block; width:100%;  }
    .content #myMenu li a:hover {  border-bottom:5px solid #DA635D; color:#DA635D;  cursor:pointer;}

    .body_wrapper { margin-bottom:500px; margin-top:70px; background-color:#ccc; }

    /*footer*/
    footer { width:100%; height:50px; line-height:50px; background-color:#4E4E56; }
    footer p  a{  color:#DA635D; text-decoration:none; font-weight:bold;}

Answer 1

这不是一个奇怪的问题。您需要使用 @media query 来解决问题。

左侧的图像足够大，占据屏幕总宽度的近一半，分辨率 1024x768 。您需要使用媒体查询在不同的屏幕上定义样式表。

示例 -

@media screen and (max-width: 1024px){
    .main .sub-header .top-logo{
        width: 250px;
    }

    .main .sub-header .top-logo img{
        width: 100%;
    }
}

此代码段仅在设备屏幕宽度小于或等于1024px时执行。

正如您所看到的，对于这种类型的设备分辨率，我减小了.top-logo的宽度，以确保它能够适合小屏幕。您需要相应地定义.top-name和其他元素，以适合不同的设备宽度。希望你明白这一点。

Answer 2

导致此问题的另一件事是当一个 @media 查询缺少右大括号 } 时。

例如，如果您的 CSS 具有以下内容：

nav {
    position: relative;
    width: 95%;
    margin: 10px auto 0 auto;
    height: auto;
    background-color: var(--magnolia);
    font-family: Roboto;
}

@media screen and (min-width: 860px) {
    nav {
        margin: 0 auto;
    }
<----------------- /* A closing brace "}" is missing here !  */

.navbar {
    display: flex;
    list-style-type: none;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    height: auto;
}
etc.
etc.

这会使它下面的所有 CSS 恢复为默认值，例如宽度：100%。在这种情况下，溢出比比皆是。

由于 W3C CSS Validator 可能无法检测到这一点，因此您必须在破坏元素之前仔细阅读所有 @media 查询以查找缺少的右大括号。其中一个就可以搞砸网页该部分下方的所有内容。修复它，一切突然就好了。

浏览器调整大小的布局中断

2 个答案: