收缩、媒体查询和网格时布局的响应式布局问题答案

【问题标题】：Responsive Layout problem with layout when shrinking, media query and grid收缩、媒体查询和网格时布局的响应式布局问题
【发布时间】：2019-10-11 19:05:51
【问题描述】：

当我使用媒体查询将其缩小到平板电脑或手机大小时，我正在尝试使页面内容内的列从 2 变为 1。

假设当网站缩小时，内容会下降到内容之下，因此所有内容都将落入每个对象之下。目前，媒体查询没有发生任何事情，当我尝试缩小网站时，一切都在相互影响。

我曾尝试使用W3Schools 从中获取更多信息，但它似乎不起作用。

*{ box-sizing: border-box; margin: 0px; 
}

body {
    height: 70%;
    width: 90%;
    padding: 0.5em;
    margin: auto;
    font-family: "Times New Roman", Times, serif;
    background: #CCFFFF;

}

img.align-left {
    float: left;
    margin-right: 2em;}

img.medium {
    width: 30%;
    height: 30%;}

img.small {
    width: 20%;
    height: 20%;}

a:link {
  background-color: #6699cc;
  color: white;
  padding: 0.1em 0.1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:visited {
    color: #0B6623;
}

a:hover, a:active {
  background-color: #01579B;
}

a{
    cursor: pointer; 
}

table {
    table-layout: fixed; 
    width: auto;
}


#page {
    min-height: 70%;
    min-width: 90%;
    margin: 1em auto 1em auto;
    z-index: auto;
    background: #CCCCFF;
}

header {
    position: sticky;
    top: 0.1em;
    height: 20%;
    padding: 2em;
    border: 0.25em;
    border-color: gray;
    border-style: dotted;
    border-width: thick; 
    z-index: 5;
    background-color: #CAE9F5;
    margin: auto;
    visibility: visible;
    min-width: 95%;
    max-width: 100%;
    clear: both;
}

nav {
    height: 2em;
    z-index: auto;
    display: inline;
}

#content { 
    position: relative;
    float: left;
    left: 1em;
    padding: 1em;
    z-index: auto; 
    width: 60%;
    max-height: 40%;
    max-width: 65%; 
    min-height: 40%;
    min-width: 65%; 
    vertical-align: baseline;
    margin: auto;
    overflow: auto;
    column-count: 2;
    column-width: 25%;
    background-color: green;
}

aside {
    position: relative;
    float: right;
    right: 1em;
    padding: 1em;
    z-index: auto; 
    max-height: 50%;
    max-width: 30%;
    min-height: 50%;
    min-width: 30%;
    vertical-align: baseline;
    margin: auto;
    background-color: red;
}

footer {
    position: relative;
    padding: 0.2em;
    bottom: 1em;
    clear: both;
    z-index: auto;
    margin: auto;
    min-width: 95%;
    max-width: 100%;
    height: 10%;
}

@media only screen and (max-width:480px) {
    /* For mobile phones: */
    .content { 
        column-count: 1;
        column-width: 100%; }

    [class*="col-"] {
    width: 100%;}
}

@media only screen and (min-width: 600px max-width: 767px) {
  /* For tablets: */
    .content{
    column-count: 1;
    column-width: 100%;
  }

  .col-1 {width: 30%;}
  .col-2 {width: 60%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 30%;}
  .col-9 {width: 100%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

}

<body>
        <div id="page">
            <header>
            <h1>This</h1>
            <nav>
                <a href="index.html">Index</a>
                <a href="home.html">Home</a>
                <a href="this.html">This</a>
                <a href="then.html">Then</a>
                <a href="what.html">What</a>
            </nav>
            </header>

            <div class="col-2">
            <div id="content">
            <figure><img src="images/window.gif" class="align-left medium" alt="New photo"><figcaption>  This is a photo  </figcaption></figure>
                <article><br />
                <h2>Heading 2 </h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra risus quam, et lacinia ante malesuada eget. 
                Morbi erat mauris, rutrum eget tortor vitae, venenatis volutpat odio. Maecenas feugiat mollis est quis sagittis. 
                Etiam vitae lorem ac purus efficitur scelerisque. Integer venenatis magna ante, laoreet efficitur tortor consequat a. 
                Sed a est scelerisque, auctor risus id, tempus nisi. Donec fermentum laoreet ullamcorper. Curabitur pulvinar massa et nisl hendrerit, ut lobortis urna hendrerit.</p>
                <br />
                <p>Vestibulum ac blandit nisl. Curabitur dapibus sem efficitur, molestie sem in, scelerisque velit. Cras quis ex lacinia massa egestas pulvinar in tristique nulla. 
                Vestibulum aliquam a leo sed mollis. Nullam quis dapibus purus. Cras dui urna, cursus eget enim et, dignissim tincidunt turpis. 
                Praesent lacinia, purus eget volutpat euismod, nibh arcu convallis velit, vitae eleifend ligula justo sagittis augue. 
                Duis lobortis nulla in sapien vestibulum, et cursus enim scelerisque. Duis a erat non leo mattis pulvinar finibus at augue.</p>
                    <br />
                    <br />
                </article>

                <article>
                <h4>Heading 2 </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra risus quam, et lacinia ante malesuada eget. 
                Morbi erat mauris, rutrum eget tortor vitae, venenatis volutpat odio. Maecenas feugiat mollis est quis sagittis. 
                Etiam vitae lorem ac purus efficitur scelerisque. Integer venenatis magna ante, laoreet efficitur tortor consequat a. 
                Sed a est scelerisque, auctor risus id, tempus nisi. Donec fermentum laoreet ullamcorper. Curabitur pulvinar massa et nisl hendrerit, ut lobortis urna hendrerit.</p>
                <br />
                <p>Vestibulum ac blandit nisl. Curabitur dapibus sem efficitur, molestie sem in, scelerisque velit. Cras quis ex lacinia massa egestas pulvinar in tristique nulla. 
                Vestibulum aliquam a leo sed mollis. Nullam quis dapibus purus. Cras dui urna, cursus eget enim et, dignissim tincidunt turpis. 
                Praesent lacinia, purus eget volutpat euismod, nibh arcu convallis velit, vitae eleifend ligula justo sagittis augue. 
                Duis lobortis nulla in sapien vestibulum, et cursus enim scelerisque. Duis a erat non leo mattis pulvinar finibus at augue.</p>>Project work with software engineering, 15hp</li>
                </ul>
                </article>
                </div>
            </div>

        <div class="col-8">
        <aside>
        <h4>Heading 2 </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra risus quam, et lacinia ante malesuada eget. 
                Morbi erat mauris, rutrum eget tortor vitae, venenatis volutpat odio. Maecenas feugiat mollis est quis sagittis. 
                Etiam vitae lorem ac purus efficitur scelerisque. Integer venenatis magna ante, laoreet efficitur tortor consequat a. 
                Sed a est scelerisque, auctor risus id, tempus nisi. Donec fermentum laoreet ullamcorper. Curabitur pulvinar massa et nisl hendrerit, ut lobortis urna hendrerit.</p>
                <br />
                <p>Vestibulum ac blandit nisl. Curabitur dapibus sem efficitur, molestie sem in, scelerisque velit. Cras quis ex lacinia massa egestas pulvinar in tristique nulla. 
                Vestibulum aliquam a leo sed mollis. Nullam quis dapibus purus. Cras dui urna, cursus eget enim et, dignissim tincidunt turpis. 
                Praesent lacinia, purus eget volutpat euismod, nibh arcu convallis velit, vitae eleifend ligula justo sagittis augue. 
                Duis lobortis nulla in sapien vestibulum, et cursus enim scelerisque. Duis a erat non leo mattis pulvinar finibus at augue.</p>>Project work with software engineering, 15hp</li>
                </ul>
        </aside>
        </div>

        <footer>
        <br />
            <details>
                <summary>Copyright 2019</summary>
                <p> By a person </p>
                <p> Doink!</p>
            </details>
        </footer>

        </div>
    </body>

这是它的图片外观：

【问题讨论】：

只是快速浏览一下；您在媒体查询中使用类选择器 .content 而不是 id 选择器 #content
您好，感谢您的帮助。我设法修复它:)

标签： html css gridview responsive-design media-queries

【解决方案1】：

是的，正如 Matt.Hamer5 所说，主要问题是您使用的是 .content 而不是 #content。

但是您也会遇到一个问题，即内容具有固定的最小和最大宽度，您需要更改这些。

媒体查询中的类似内容：

#content { 
    column-count: 1;
    column-width: 100%;
    width: 100%;
    max-width: 100%;
}
aside {
    width: 100%;
    max-width: 100%;
}

【讨论】：