固定布局的响应式设计媒体查询答案

【问题标题】：Responsive Design Media Queries for Fixed Layout固定布局的响应式设计媒体查询
【发布时间】：2021-09-27 05:07:38
【问题描述】：

我创建了一个宽度为 1000 像素的网站。我想让它响应，但媒体查询并没有真正起作用。

有没有办法保持固定的 1000 像素宽度但随着浏览器变小而缩小网站？到目前为止，媒体查询似乎不起作用。

这是我的媒体查询：

链接：

媒体查询：

@media screen and (max-device-width: 600px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12, .container {

    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    }

    #index, #about, #services, #contact .logo, ul, .slide, .headSub, .aboutContent, .aboutText, 
    .division, .service_buzzwords, .services-content, .serv, .contactPage, .map{
        float: none;
    }
    .nav ul, li, a{
        display: block;
    }
    .division, .aboutImg img{
        display: none;
    }
    .indexContent{
        width: 100%;
    }
    .rw-sentence { font-size: 1em; }
    img{
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media screen and (max-width: 320px){
    .rw-sentence { font-size: 0.5em; }
}

请帮忙。谢谢。

【问题讨论】：

媒体查询链接：
您是否在您的<head> 中添加了<meta name="viewport" content="initial-scale=1">？
是的.. :( 我不知道怎么了.. :(

标签： html css media-queries

【解决方案1】：

这是达到预期效果的最佳方式：

您创建了一个包装器 DIV。你给那个包装器 DIV 一个固定的宽度（在你的例子中：1000px）并且 - 在一个典型的布局中 - 将它居中。
确保该包装器 DIV 中的网格元素是基于百分比的。例如，如果您的第一列应该是 400 像素，而您的第二列应该是 600 像素，请将它们设置为 40% 和 60%。
如果您想支持旧版浏览器，则需要为网格元素添加一个额外的子 DIV，用于填充、边距和/或边框。如果您不需要支持旧版浏览器，border-box 应该可以解决问题。
当您的网站小于某个大小时，使用媒体查询将包装器 DIV 的宽度设置为 100%。

当然，您也可以使用a framework that implements this technique。

【讨论】：