0

我创建了一个 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; }
}

请帮忙。谢谢。

4

1 回答 1

0

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

  • 您创建一个包装器 DIV。您给该包装器 DIV 一个固定的宽度（在您的情况下：1000px）并且 - 在典型的布局中 - 将其居中。

  • 确保该包装器 DIV 中的网格元素是基于百分比的。例如，如果您的第一列应该是 400 像素，而您的第二列应该是 600 像素，请将它们设置为 40% 和 60%。

  • 如果你想支持旧的浏览器，你需要为你的网格元素添加一个额外的子 DIV，用于填充、边距和/或边框。如果您不需要支持较旧的浏览器，border-box应该可以解决问题。

  • 当您的网站小于某个大小时，使用媒体查询将包装器 DIV 的宽度设置为 100%。

当然，您也可以使用实现此技术的框架。

于 2014-01-07T20:23:49.850 回答