覆盖所有屏幕尺寸的桌面媒体查询

Question

我正在实施媒体查询的移动优先方法。我将平板电脑和台式机的最小宽度媒体查询设置为 37.5em 和 50em。

我希望项目部分在移动设备上显示为列，在桌面上显示为行。我的桌面媒体查询似乎凌驾于其他一切之上。

HTML：

<section id="projects">

<h2>Projects</h2>

<div id="projects_container">

<figure class="hvr-float-shadow">
    <img src="ImagePlaceholder.png">
    <figcaption>Random Quote <br> Generator</figcaption>
</figure>

<figure>
    <img src="ImagePlaceholder.png">
    <figcaption>Random Quote <br> Generator</figcaption>
</figure>

<figure>
    <img src="ImagePlaceholder.png">
    <figcaption>Random Quote <br> Generator</figcaption>
</figure>

<figure>
    <img src="ImagePlaceholder.png">
    <figcaption>Random Quote <br> Generator</figcaption>
</figure>

<figure>
    <img src="ImagePlaceholder.png">
    <figcaption>Random Quote <br> Generator</figcaption>
</figure>

<figure>
    <img src="ImagePlaceholder.png">
    <figcaption>Random Quote <br> Generator</figcaption>
</figure>


 </section>

移动优先 CSS：

#projects{
padding-top: 5rem;
padding-bottom: 15rem;
background-color: #FFFAFA;
flex-direction: column;
justify-content: center;
margin: 0 auto;
display: flex;

}


 #projects_container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;


}

 figure{
 display: block; 
 position: relative; 
 overflow: hidden; 
 width: 75%;
 }

 figure img {
width: 100%;
}

 figcaption { 
 position: absolute; 
 background: rgba(0,0,0,0.75); 
 color: white; 
 padding: 10px 20px; 
 width: 100%;


 opacity: 0;
 bottom: 0; 
 top: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-o-transition:      all 0.6s ease;
}

figure:hover figcaption {
opacity: 1;
top: 0;
}

违规桌面媒体查询：

@media (min-width: 50em) {
#projects_container {
    flex-direction: row;
    font-size: 145%;
    align-items: center;

}
#unhide-text {
display: inline;
}

figure{
display: block; 
position: relative; 
overflow: hidden; 
width: 25%;
}


.contact-container{

    flex-direction: row;
  }

}

我的理解是媒体查询只有在满足条件时才适用。

我错过了什么？

https://sandbagger.github.io/MyPortfolio/

Answer 1

使用px 代替em。并检查tablets 和mobiles 的断点。