时间戳

首页 > 解决方案 > 包含内容的 1200px 媒体查询；背景颜色保持 100% 宽度

css - 包含内容的 1200px 媒体查询；背景颜色保持 100% 宽度

问题描述

我一直在努力寻找合适的解决方案；没有在我的标记中添加很多 div。

我需要 1200px 媒体查询的内容；保持固定在 1200 和中心。哪个正在工作。

但是，具有背景颜色、阴影等的行容器保持 100% 的宽度。

关于如何最好地解决这个问题的任何指导；将不胜感激。

* {
    box-sizing: border-box; margin: 0; padding: 0; 
}
input[type=text] {
    font-size: 1.5rem; padding: 0 0.25em 0 1.2em; height: 4rem;
    line-height: 4rem; width: 50vw; color: #333;
    background: #f5f5f5; border: 1px solid #f5f5f5;
}
.head_sticky {
    position: sticky; top: 0; z-index: 100;
}
@media only screen and (max-width: 599px) {
    .col-m-1 { width: 16.67%; } .col-m-2 { width: 33.33%; } .col-m-3 { width: 50.00%; }
    .col-m-4 { width: 66.67%; } .col-m-5 { width: 83.33%; } .col-m-6 { width: 100%; }
    [class*='col-'] {
        float: left; padding: 5px 16px 5px 0;
    }
    .search_form_cls {
        height: 4.5rem; line-height: 4.5rem; font-size: 3rem;
        color: black; border: none; background: transparent;
    }
    input[type=text] {
        width: 75vw;
    }
}
@media only screen and (min-width: 600px) {
    .col-t-1 { width: 12.5%; } .col-t-2 { width: 25%; } .col-t-3 { width: 37.5%; }
    .col-t-4 { width: 50%; } .col-t-5 { width: 62.5%; } .col-t-6 { width: 75%; }
    .col-t-7 { width: 87.5%; } .col-t-8 { width: 100%; }
    [class*='col-'] {
        float: left; padding: 5px 24px 5px 0;
    }
}
@media only screen and (min-width: 768px) {
    .col-d-1 { width: 8.33%; } .col-d-2 { width: 16.66%; } .col-d-3 { width: 25% }
    .col-d-4 { width: 33.33% } .col-d-5 { width: 41.66% } .col-d-6 { width: 50%; }
    .col-d-7 { width: 58.33%; } .col-d-8 { width: 66.66%; } .col-d-9 { width: 75%; }
    .col-d-10 { width: 83.33%; } .col-d-11 { width: 91.66% } .col-d-12 { width: 100%; }
    [class*='col-'] {
        float: left; padding: 5px 28px 5px 0;
    }
}
@media only screen and (min-width: 1200px) {
    .A3_row {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}
[class*='col-']:first-of-type {
    padding-left: 16px;
}
[class*='col-']:last-of-type {
    padding-right: 16px;
}
.A3_row {
    display: flex; background-color: white;
}
.A3_row [class*='col-'] {
    display: flex; align-items: center; flex-wrap: wrap;
}
.A3_row::after {
    content: ""; clear: both; display: table;
}
.navigation_link
    text-decoration: none; color: black;
}
<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>Test</title>
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id='head' class='A3_row shadow_bottom head_sticky'>
            <div class='col-m-1 col-t-1 col-d-1'>
                <span class='navigation_link'>&#9776;</span>
            </div>
            <div class='col-m-2 col-t-2 col-d-2'>
                LOGO            
            </div>
            <div class='col-m-3 col-t-5 col-d-9 t-end'>
                    <input autocomplete='off' name='q' class='search_form_m' type='text' placeholder='Search' value='' maxlength='100'>
            </div>
        </div>
        <div class='A3_row' style='background-color:blueviolet; font-size: 1.5em; font-weight: bold;'>
            <div class='col-m-6 col-t-8 col-d-12'>Heading</div>
        </div>
        <div class='A3_row' style='background-color:blueviolet;'>
            <div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
        </div>
        <div class='A3_row' style='background-color:gold; font-size: 1.5em; font-weight: bold;'>
            <div class='col-m-6 col-t-8 col-d-12'>Heading</div>
        </div>
        <div class='A3_row' style='background-color:gold;'>
            <div class='col-m-6 col-t-8 col-d-12'  style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
        </div>
        <div class='A3_row' style='background-color:lightseagreen; font-size: 1.5em; font-weight: bold;'>
            <div class='col-m-6 col-t-8 col-d-12'>Heading</div>
        </div>
        <div class='A3_row' style='background-color:lightseagreen;'>
            <div class='col-m-6 col-t-8 col-d-12'  style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
        </div>    
        <div class='A3_row'>
            <div class='col-m-6 col-t-8 col-d-12' style='align-items: flex-start'>
                <span>FOOTER</span>
            </div>
        </div>
    </body>
</html>

标签： css

解决方案

仅使用 CSS 的解决方案calc()：

@media only screen and (min-width: 1200px) {
  .A3_row {
    width: 100%;
    padding-left: calc((100% - 1200px) / 2);
    padding-right: calc((100% - 1200px) / 2);
  }
}

此声明使其包含块的宽度为width“行” ，而声明确保“内容”为.100%padding-*1200px

推荐阅读