css - 如何让最小宽度媒体查询适用于移动优先设计

Question

我正在通过仅使用 min-width media-query 将我的网络应用程序设计为移动优先。但是，它没有按应有的方式工作!在屏幕尺寸为 500 像素及以下时，内容不是变小，而是变大。而不是内容在 500 像素的最小屏幕尺寸以上更大，而是更小。我希望所有内容在小于等于 500 像素的最小屏幕尺寸时变小，在大于 500 像素的屏幕尺寸时变大。我还想让“生成报价”和“推文”按钮向上或向下移动以适应由最小宽度媒体查询引起的变化

您可以在这里查看我的 CodePen:https://codepen.io/IDCoder/full/KZqNdr/

这是我的 CSS 代码:

.container{
    text-align: center;
    background-image: url("https://s25.postimg.org/9pnce8yr3/galaxy-s8_overview_kv_type1b.jpg");
    /**https://s25.postimg.org/exhm9rejz/galaxy-s8_overview_kv_type1.jpg"**/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    margin: auto;
    /**border: 3px solid grey;**/   
}



h1{
    color: white;
}



.Motorcycle{
    margin: auto;
    width: auto;
    /**border: 1px solid grey;**/
    text-align: center;

}

/**
.cropper{
    border-radius: 80px;
    opacity: 0.85;
}
**/

.btn.btn-default{
  color: #0040ff;
  font-size: .80em;
  font-family: Orbitron, sans-serif;
  line-height: 4em;  


}

.gstuff{
  background-image: url("https://s25.postimg.org/onteix7u7/G_Motorcycle_Helmet_3.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 350px;
    height: 477px;
    margin: auto;
    opacity: 0.85;

}

#push-one{
  transform: translateY(200px);
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:15px;
  height: 50px;
  width: 150px;
  margin: auto;
}

#push-two{
  transform: translateY(530px);
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:7px;
  height: 30px;
  width: 50px;
  margin: auto;
  line-height: 2em;
  color: blue;
}



@media(min-width: 500px){
  .gstuff{ 
  width: 250px;
  height: 341px;
  }
}

我用这个 CodePen 实现了足够的移动优先 min-width : ，但我很难用 this one 实现它

Answer 1

对于初学者来说，你的媒体查询有一个错误，你需要指定screen and。此外，我假设这是针对较小的屏幕尺寸，因为 gstuff 具有较宽的初始设置。

@media screen and (max-width: 500px) {
  .gstuff{ 
  width: 250px;
  height: 341px;
  }
}

接下来，您需要在 gstuff 类中使用 position:relative。最后，我将推文按钮绝对定位在底部和中心:

#push-two{
  background-color: #c6c6c4;
  border-bottom:2px inset #FFF;
  border-right:2px inset #FFF;
  border-radius:7px;
  height: 30px;
  width: 50px;
  margin: auto;
  line-height: 2em;
  color: blue;
  position:absolute;
  bottom:0;
  left:50%;
  right: 50%
}

只有在父容器上使用 position:relative 或 absolute 时，绝对定位才有效。

Here is a codepen