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的断点。

桌面媒体查询覆盖所有屏幕大小

1 个答案: