Html 媒体查询不适用于不同的屏幕

我写了1200像素的媒体查询。这是工作良好的1200px，但当我改变到1250px它不工作。所有的元素都会受到干扰

@仅媒体屏幕和（最小宽度：1200px）
.粘性1{
位置：绝对位置；
左缘：58%；
利润率最高：47%；
宽度：30%；
}
.生长{
位置：绝对位置；
左边缘：-25%；
字体大小：23px；
利润率最高：45%；
}
}

该法人实体成立

你错过了{

Css

@media only screen and (min-width: 1200px){
.sticky1 {
    position: absolute;
    margin-left: 58%;
    margin-top: 47%;
    width: 30%;
}
.growthp1 p {
    position: absolute;
    margin-left: -25%;
    font-size: 23px;
    margin-top: 45%;
}
}

---

首先，我想通知您，您错过了

{

，请先完成此操作，然后根据您的要求按照以下代码操作。您不需要使用：

@媒体屏幕和（最小设备宽度：1200px）和（最大设备宽度：1600px）

这段代码只在

1200px-1599px

之间应用css，这对您来说不是一个好方法，因为这需要在代码中应用更多的媒体查询

因此，您可以使用以下方法将媒体查询应用于您的页面

对于使用

@媒体（最小宽度：值）{}

：

// First Priority
@media (min-width: 1200px){
    //your css code
}
// Second Priority
@media (min-width: 1250px){
    //your css code
}

// First Priority
@media (max-width: 1249px){
    //your css code
}
// Second Priority
@media (max-width: 1199px){
    //your css code
}

此媒体查询适用于屏幕大小为1200及以上的用户

对于使用

@媒体（最大宽度：值）{}

：

// First Priority
@media (min-width: 1200px){
    //your css code
}
// Second Priority
@media (min-width: 1250px){
    //your css code
}

// First Priority
@media (max-width: 1249px){
    //your css code
}
// Second Priority
@media (max-width: 1199px){
    //your css code
}

此媒体查询适用于小于1200的屏幕大小

试着理解上面的逻辑，如果你有任何问题，你可以通过评论这个答案问我，我会重播你的任何疑问

---

谢谢您…

如果您使用的是

位置：绝对

则顶部、左侧、右侧、底部将起作用，而不是页边顶部、左侧、右侧和右侧。 请使用顶部，左侧，右侧，底部，然后工作

@media only screen and (min-width: 1200px){
.sticky1 {
    position: absolute;
    left: 58%;
    top: 47%;
    width: 30%;
}
.growthp1 p {
    position: absolute;
    left: -25%;
    font-size: 23px;
    top: 45%;
}
}

<div class="row">
                <div class="col-md-6 col-sm-6 growthp1">
                  <p>The legal entity was incorporated.</p>
                    <img src="images/growth/8.png" class="sticky1 img-fluid">
                    <img src="images/growth/3.png" class="growthp1img img-fluid">
                </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">                
                            </div>
</div>

@仅媒体屏幕和（最小宽度：1200px）{
.粘性1{
位置：绝对位置；
左：58%；
最高：47%；
宽度：30%；
}
.生长{
位置：绝对位置；
左-25%；
字体大小：23px；
最高：45%；
}
}
该法人实体成立

---

检查1250px屏幕大小是否在我的设备上正常工作。

是的，这是最小宽度的媒体。.您的代码在1250px屏幕之后工作。.您应该添加最大宽度我也添加了最大宽度1250px，但它也不能以这种方式工作，因为您错过了{open…您应该添加的内容{是的，如果我使用1200px，那么它应该适用于1200px和超过1200px的屏幕大小，但它们不工作，因为我将使用1250px或1300px，它会受到干扰。你能分享你的1250px css代码，因为它是在你的问题片段中，因为现在我看不到你的代码。如果你能看到上面的图像，那么第一个是1200p吗第二个是1250px。因此，如果我使用像@media screen和（最小设备宽度：1200px）和（最大设备宽度：1600px）这样的媒体查询，那么相同的代码应该在这些屏幕大小之间工作，但是如果你能看到这两个图像，蓝线图像不会与圆形图像（2006）粘在一起。那么如何才能使这两张2006年的图像和一条蓝线在每个屏幕上都保持一致。我刚刚编辑了我的ans，请尝试用作参考，我希望这将帮助您解决您的问题。谢谢。这对您有帮助吗兄弟？这只适用于1200px的屏幕大小，但如果您使用1250px或1300p然后你会发现这两张图片并没有像上面第一张图片那样粘在一起。我有一个更新屏幕，你的媒体查询是1250px大小。请检查。