个人中心
gpt4 book ai didi

html - Responsive Layout 收缩时布局、媒体查询和网格的问题

转载 作者：行者123 更新时间：2023-11-27 23:14:24 25 4
gpt4 key购买 nike

当我使用媒体查询将页面缩小到平板电脑或手机大小时，我试图让页面内容中的列从 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>

图片是这样的: https://imgshare.io/image/WScnw enter image description here

最佳答案

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

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

媒体查询中的类似内容:

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

关于html - Responsive Layout 收缩时布局、媒体查询和网格的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58337979/

25 4 0
文章推荐： javascript - 带有 localStorage 变量的 jQuery 循环不起作用
文章推荐： php - 在您的 html 表中应用过滤器选项
文章推荐： javascript - 如何在 Visual Studio Code 中更改代码格式
文章推荐： javascript - 如何从 summernote 中编辑的文本中获取格式化的 html 代码
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com