我正在通过仅使用 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;
}
}
最佳答案
对于初学者来说,你的媒体查询有一个错误,你需要指定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 时,绝对定位才有效。
关于css - 如何让最小宽度媒体查询适用于移动优先设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48123248/