すべての画面サイズをオーバーライドするデスクトップメディアクエリ

Question

私はメディアクエリに対するモバイルの最初のアプローチを実装しています。私はタブレットとデスクトップのために37.5emと50emでmin-widthのメディアクエリを設定しました。

私は、プロジェクトのセクションをモバイル用の列として、デスクトップ用の列として表示したいと考えています。私のデスクトップメディアのクエリは他のすべてのものを乗り越えているようだ。

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; 
    } 

} 

私の理解で基準が満たされた場合、メディアクエリーのみ適用されるべきであるということです。

私には何が欠けていますか？代わりにem使用pxの

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

Answer 1

。そして、tabletsとmobilesのブレークポイントを確認してください。