为什么使用断点会给我的笔记本电脑和电脑相同的结果？答案

【问题标题】：Why does using Breakpoint give me same results for laptop and pc?为什么使用断点会给我的笔记本电脑和电脑相同的结果？
【发布时间】：2022-01-16 19:26:21
【问题描述】：

我的 CSS 断点不起作用

我的代码：

@media only screen and (min-width: 992px) {
    body{
        overflow-x: hidden;
    }
    ul{
        position: absolute; top: 0px; left: 640px; 
        display: inline-flex;
    }
    h6.f22{
        left: 140px;
        top:170px;
    }
    h2.int{
        top:160px;
        left: 94px;
        font-size: 55px;
    }
    h2.int2{
        top:160px;
        left: 370px;
        font-size: 55px;
    }
    p.descp{
        left: 100px;
        top:260px;
    }
    button.button{
        left:130px;
        top:430px;
    }
    div.boxed4{
        height:615px;
    }
    div.boxed2{
        height:800px;
    }
    footer#footer{
        position: relative;
       top: 363px;
    }
    h1.h1t{
        left: 500px;
        top:100px;
    }
    input#f1.form-control{
        left:350px;
        top:150px;
    }
    textarea#f1.form-control{
        left:350px;
        top:163px;
    }
    input.form-control.submit{
        top:170px;
        left:350px;
    }
    svg.svg-inline--fa1.fa-facebook{
        left:400px;
    }
    svg.svg-inline--fa2{
        left:430px;
    }
    svg.svg-inline--fa4{
        left:422px;
    }
    .svg-inline--fa{
display:inline-flex;
padding: 0 40px 0 0;
position: relative;
left:500px; top: 35px;
height: 45px;
width: 45px;
    }
}
@media only screen and (min-width: 1280px){
    ul{
        position: absolute; top: 0px; left: 1000px; 
        display: inline-flex;
    }
    a.nav-text{
font-size: 23px;
    }
    h1.title{
        font-size: 30px;
        position: absolute; top:10px; left: 60px;
    }
    h6.f22{
        font-size: 18px;
    }
    h1.h1t{
        position: relative; top: 140px; left: 850px;
    }
    input.form-control.submit{
        top:170px;
        left:691px;
    }
    input#f1.form-control{
        left:691px;
        top:150px;
    }
    textarea#f1.form-control{
        left:691px;
        top:163px;
    }
    .svg-inline--fa{
        display:inline-flex;
        padding: 0 40px 0 0;
        position: relative;
        left:800px; top: 35px;
            }
 
}

这里，@media only screen and (min-width: 992px) 适用于笔记本电脑，@media only screen and (min-width: 1280px) 适用于大型设备，例如个人电脑。问题是当我在笔记本电脑上时，我的第一个断点不起作用，每当我注释掉第二个断点时，它才适用于笔记本电脑。我该怎么做才能解决这个问题？

【问题讨论】：

标签： html css media-queries responsive

【解决方案1】：

您的查询似乎是正确的。猜猜当您将笔记本电脑和台式机上的浏览器大小调整为屏幕大小的三分之一时，您会看到查询正常工作。

如今，大多数笔记本电脑都使用 1920x1080 或更高的分辨率。即使它较低，仍然有很多大分辨率使用到 1280x1024。所有这些解决方案都将使您最新的媒体查询生效。

【讨论】：

【解决方案2】：

我认为一开始你应该为电脑或手机设计这是你的第一个和主要的 css

然后放媒体查询和控制你的元素。

在这个 css 文件中你需要 (@media only screen and (min-width: 1280px)) 你应该把这段代码放在上面

【讨论】：