如何获取要激活的媒体查询-解网

问：

我一直在自学如何进行媒体查询，作为开发响应式网站设计的一部分。

为了确认媒体查询是否正常工作，我使用它来更改某些元素的颜色。一旦确认可以正常工作，我将使用它来重新排列手机和 ipad 屏幕的一些元素。

但是，就我而言，我无法让媒体查询正常工作。这似乎很简单，但 Chrome 和 Firefox 都拒绝更改以响应使浏览器窗口非常小（这应该触发媒体查询）。

我想做的是，当浏览器窗口的宽度低于 400px 时，将应用新的格式规则。

这是我的 HTML：

* {
    margin: 0;
    padding: 0;
  }

.flex-container-1 {
    display:flex;
    background-color: skyblue;
    color: white;
}

.flex-body-1 {
    padding: 1em;
}

.content-body {
    background-color: skyblue;
    color: white;
    display: flex;
    justify-content:left;
}

.flex-body-1:hover {
    background-color: white;
    color: skyblue;
}
.flex-container-2 {
    display: flex;
    width: min(90%, 100em); /* have a width which is the lesser of these two compared to viewport */
    margin-inline: auto;
    padding: max(1em, 2vh); /* choose whichever is bigger- 2% of viewport height, or 1em */
}

.nav-container {
    display: flex;
    flex-direction: column;
    width: 10em;    
}

.nav-items {
    width: 10em;
}

.nav-items:hover {
    background-color: white;
    color: skyblue;
}    

.flex-content-container {
    display: flex;
    flex-wrap: wrap;
    align-content:space-evenly;
    gap: 1em;
    padding: 5em;
}

.flex-content-container-box {
    background-color: blue;
    padding: 2em;
    border-radius: 1em; /* use this to give a nice rounded border to our items */
    border-style:ridge;
    box-shadow: 1em 1em 1em darkblue; /* 0em 2em 2em;*/
}

#c1 {
    order:8;
}

#c2 {
    order:4;
}

#c3 {
    order: 6;
}

#c4 {
    order: 2;
}

#c5 {
    order: 1;
}

#c6 {
    order: 7;
}

#c7 {
    order: 3;
}

#c8 {
    order:5;
}

@media (max-width: 400px) {
    #c6 {
        background-color: green;
    }
    .content-body {
        background-color: orange;
        color: white;
        display: flex;
        justify-content:left;
    }
}

<div class="flex-container-1">
    <div class="flex-body-1">Home</div>
    <div class="flex-body-1">About</div>
    <div class="flex-body-1">Contact</div>
</div>
<div class="content-body">
    <div id="nav-menu" class="nav-container">
        <div class="nav-items">Item 1</div>
        <div class="nav-items">Item 2</div>
        <div class="nav-items">Item 3</div>
        <div class="nav-items">Item 4</div>
        <div class="nav-items">Item 5</div>
    </div>
    <div>
        <h1>Main content</h1>
        <p>This is the main page of information that I want to display on my page.</p>
        <p>IT should sit to the right of the nav elements which should go along the left side of the page.</p>
        <div class="flex-content-container">
            <div class="flex-content-container-box" id="c1">content box 1</div>
            <div class="flex-content-container-box" id="c2">content box 2</div>
            <div class="flex-content-container-box" id="c3">content box 3</div>
            <div class="flex-content-container-box" id="c4">content box 4</div>
            <div class="flex-content-container-box" id="c5">content box 5</div>
            <div class="flex-content-container-box" id="c6">content box 6</div>
            <div class="flex-content-container-box" id="c7">content box 7</div>
            <div class="flex-content-container-box" id="c8">content box 8</div>
        </div>
    </div>
</div>

谁能看到我做错了什么？

谢谢堆

:-)

CSS Flexbox 媒体查询

如何获取要激活的媒体查询

how do I get a media query to activate

评论