文章/答案/技术大牛

发布

社区首页 >问答首页 >媒体查询是否未正确应用于CSS网格？

问媒体查询是否未正确应用于CSS网格？
EN

Stack Overflow用户

提问于 2020-11-10 16:13:05

回答 2查看 51关注 0票数 0

我正在尝试为CSS网格下的最小宽度为501px和最大宽度为768px的设备应用媒体。

下面是我写的html和CSS代码。媒体查询适用于小型设备(即最大宽度: 500px)，但不适用于中型设备。

.container {
    display: grid;
    grid-template-areas:
        "header header header header"
        "content content content sidebar"
        "box-1 box-2 box-3 box-4"
        "footer footer footer footer";
    grid-gap: 1rem;
}

.header,
.content,
.sidebar,
.box-1,
.box-2,
.box-3,
.box-4,
.footer {
    border: 1px #ccc solid;
    padding: 0.5rem;
}

.header {
    grid-area: header;
}

.content {
    grid-area: content;
}

.sidebar {
    grid-area: sidebar;
}

.box-1 {
    grid-area: box-1;
}

.box-2 {
    grid-area: box-2;
}

.box-3 {
    grid-area: box-3;
}

.footer {
    grid-area: footer;
    text-align: center;
}

@media (min-width: 501px) and (max-width: 768px) {
    .container {
        grid-template-areas:
            "header header"
            "content sidebar"
            "box-1 box-1"
            "box-2 box-2"
            "box-3 box-3"
            "box-4 box-4"
            "footer";
    }
}

@media (max-width: 500px) {
    .container {
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "box-1"
            "box-2"
            "box-3"
            "box-4"
            "footer";
    }
}

<div class="container">
    <header class="header">
        <h1>My Website</h1>
    </header>
    <section class="content">
        <h3>Welcome To My Site</h3>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit
            reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus
            eos et mollitia velit vel molestias sint dolore at doloremque neque
            minima optio ad tempore quisquam perferendis esse non. Aliquam illum
            doloremque architecto! Rem voluptas at sunt sed enim eius laborum
            dolores quaerat?
        </p>
    </section>
    <aside class="sidebar">
        <h3>Contact Us</h3>
        <ul>
            <li>Some Company</li>
            <li>50 Main st, Boston MA</li>
            <li>something@something.com</li>
            <li>555-555-5555</li>
        </ul>
    </aside>
    <div class="box-1">
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            quisquam at veritatis a labore quod illo dolorem fugiat quas
            repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
            aliquid quaerat aperiam.
        </p>
    </div>
    <div class="box-2">
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            quisquam at veritatis a labore quod illo dolorem fugiat quas
            repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
            aliquid quaerat aperiam.
        </p>
    </div>
    <div class="box-3">
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            quisquam at veritatis a labore quod illo dolorem fugiat quas
            repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
            aliquid quaerat aperiam.
        </p>
    </div>
    <div class="box-4">
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            quisquam at veritatis a labore quod illo dolorem fugiat quas
            repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
            aliquid quaerat aperiam.
        </p>
    </div>
    <footer class="footer">
        <p>Copyright &copy; 2019</p>
    </footer>
</div>

当最小宽度为501px，最大宽度为768px时，我希望每个框有2列。

当max-width: 500px时它取1列，但当我写min-width为501px和max-width 768px时不是

css

html

回答 2

Stack Overflow用户

发布于 2020-11-10 16:35:47

尝试从@media (min-width: 501px) and (max-width: 768px)中删除不必要的元素

.container {
    display: grid;
    background-color: lightpink;
    grid-template-areas:
        "header header header header"
        "content content content sidebar"
        "box-1 box-2 box-3 box-4"
        "footer footer footer footer";
    grid-gap: 1rem;
}

.header,
.content,
.sidebar,
.box-1,
.box-2,
.box-3,
.box-4,
.footer {
    border: 1px #ccc solid;
    padding: 0.5rem;
}

.header {
    grid-area: header;
}

.content {
    grid-area: content;
}

.sidebar {
    grid-area: sidebar;
}

.box-1 {
    grid-area: box-1;
}

.box-2 {
    grid-area: box-2;
}

.box-3 {
    grid-area: box-3;
}

.footer {
    grid-area: footer;
    text-align: center;
}

@media (min-width: 501px) and (max-width: 768px) {
    .container {
        background-color: lightgreen;
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "box-1"
            "box-2"
            "box-3"
            "box-4"
            "footer";
    }
}

@media (max-width: 500px) {
    .container {
        background-color: orange;
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "box-1"
            "box-2"
            "box-3"
            "box-4"
            "footer";
    }
}

<div class="container">
    <header class="header">
      <h1>My Website</h1>
    </header>
    <section class="content">
      <h3>Welcome To My Site</h3>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit
        reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus
        eos et mollitia velit vel molestias sint dolore at doloremque neque
        minima optio ad tempore quisquam perferendis esse non. Aliquam illum
        doloremque architecto! Rem voluptas at sunt sed enim eius laborum
        dolores quaerat?
      </p>
    </section>
    <aside class="sidebar">
      <h3>Contact Us</h3>
      <ul>
        <li>Some Company</li>
        <li>50 Main st, Boston MA</li>
        <li>something@something.com</li>
        <li>555-555-5555</li>
      </ul>
    </aside>
    <div class="box-1">
      <h3>Heading</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
        quisquam at veritatis a labore quod illo dolorem fugiat quas
        repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
        aliquid quaerat aperiam.
      </p>
    </div>
    <div class="box-2">
      <h3>Heading</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
        quisquam at veritatis a labore quod illo dolorem fugiat quas
        repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
        aliquid quaerat aperiam.
      </p>
    </div>
    <div class="box-3">
      <h3>Heading</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
        quisquam at veritatis a labore quod illo dolorem fugiat quas
        repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
        aliquid quaerat aperiam.
      </p>
    </div>
    <div class="box-4">
      <h3>Heading</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
        quisquam at veritatis a labore quod illo dolorem fugiat quas
        repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
        aliquid quaerat aperiam.
      </p>
    </div>
    <footer class="footer">
      <p>Copyright &copy; 2019</p>
    </footer>
  </div>

票数 0

Stack Overflow用户

发布于 2020-11-10 16:39:56

每次都需要添加display: grid;

您忘记创建.box-4 { grid-area: box-4; }

.header,
.content,
.sidebar,
.box-1,
.box-2,
.box-3,
.box-4,
.footer {
    border: 1px #ccc solid;
    padding: 0.5rem;
}

.header {
    grid-area: header;
}

.content {
    grid-area: content;
}

.sidebar {
    grid-area: sidebar;
}

.box-1 {
    grid-area: box-1;
}

.box-2 {
    grid-area: box-2;
}

.box-3 {
    grid-area: box-3;
}

.box-4 {
    grid-area: box-4;
}

.footer {
    grid-area: footer;
    text-align: center;
}


.container {
    display: grid;
    grid-template-areas:
        "header header header header"
        "content content content sidebar"
        "box-1 box-2 box-3 box-4"
        "footer footer footer footer";
    grid-gap: 1rem;
}


@media (min-width: 501px) and (max-width: 768px) {
    .container {
        display: grid;
        grid-template-areas:
            "header header"
            "content sidebar"
            "box-1 box-1"
            "box-2 box-2"
            "box-3 box-3"
            "box-4 box-4"
            "footer footer";
    }
}

@media (max-width: 500px) {
    .container {
        display: grid;
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "box-1"
            "box-2"
            "box-3"
            "box-4"
            "footer";
    }
}

<div class="container">
    <header class="header">
        <h1>My Website</h1>
    </header>
    <section class="content">
        <h3>Welcome To My Site</h3>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit
            reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus
            eos et mollitia velit vel molestias sint dolore at doloremque neque
            minima optio ad tempore quisquam perferendis esse non. Aliquam illum
            doloremque architecto! Rem voluptas at sunt sed enim eius laborum
            dolores quaerat?
        </p>
    </section>
    <aside class="sidebar">
        <h3>Contact Us</h3>
        <ul>
            <li>Some Company</li>
            <li>50 Main st, Boston MA</li>
            <li>something@something.com</li>
            <li>555-555-5555</li>
        </ul>
    </aside>
    <div class="box-1">
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            quisquam at veritatis a labore quod illo dolorem fugiat quas
            repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
            aliquid quaerat aperiam.
        </p>
    </div>
    <div class="box-2">
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            quisquam at veritatis a labore quod illo dolorem fugiat quas
            repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
            aliquid quaerat aperiam.
        </p>
    </div>
    <div class="box-3">
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            quisquam at veritatis a labore quod illo dolorem fugiat quas
            repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
            aliquid quaerat aperiam.
        </p>
    </div>
    <div class="box-4">
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
            quisquam at veritatis a labore quod illo dolorem fugiat quas
            repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
            aliquid quaerat aperiam.
        </p>
    </div>
    <footer class="footer">
        <p>Copyright &copy; 2019</p>
    </footer>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64765087

复制

相似问题

问媒体查询是否未正确应用于CSS网格？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询是否未正确应用于CSS网格？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询是否未正确应用于CSS网格？
EN