為什么使用斷點會給我的筆記本電腦和電腦相同的結果？

我的 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) 適用于大型設備，例如 pc。問題是當我在筆記本電腦上時，我的第一個斷點不起作用，每當我注釋掉第二個斷點時，它才適用于筆記本電腦。我能做些什么來解決這個問題？

uj5u.com熱心網友回復：

根據以下表格組織您的媒體查詢：

p{
  background-color: black;
  font-size: 50px;
}

/* mobile */
@media only screen and (min-width: 480px){
  p{
    color: red;
  }
}

/* tablet */
@media only screen and (min-width: 768px){
  p{
    color: green;
  }
}

/* desktop */
@media only screen and (min-width: 992px){
  p{
    color: blue;
  }
}

/* huge */
@media only screen and (min-width: 1280px) {
  p{
    color: white;
  }
}

<p>TEXT</p>

uj5u.com熱心網友回復：

您的查詢似乎正確。猜想你會在將筆記本電腦和臺式機上的瀏覽器大小調整為螢屏大小的三分之一時看到查詢作業。

如今，大多數筆記本電腦使用 1920x1080 或更高的解析度。即使它較低，仍然有很多大解析度使用到 1280x1024。所有這些解決方案都將使您最新的媒體查詢啟動。

uj5u.com熱心網友回復：

我認為一開始你應該為電腦或手機設計這是你首先和主要的 css

2.然后放置媒體查詢并控制您的元素。

在這個css檔案中你需要（@media only screen and (min-width: 1280px)）并且你應該把這個代碼放在上面

標籤：

上一篇：如何修復SVG文本影片中丟失的像素？

下一篇：隨機顏色生成器以及如何將其應用于我現有的漸變