重寫所有屏幕大小的桌面媒體查詢

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

代替em使用px。並檢查tablets和mobiles的斷點。