Question

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

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

这是我的媒体查询：

链接：

媒体查询：

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

请帮忙。感谢。

Answer 1

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

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

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

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

1 个答案: