堆棧內存溢出
  簡體   English   中英

@media 屏幕和 (max-width:768px) 不起作用

[英]@media screen and (max-width:768px) not working

 原文  2019-07-30 07:34:07  1   3    html/ css

問題描述

我正在為我的 uni 作業創建一個新網站，但是當我輸入如下提供的代碼時，我的 @media 屏幕和 (max-width:720px) 沒有任何更改。 我想要做的是我想讓我的導航鏈接隱藏在一個漢堡下以在移動設備中顯示（一旦工作，將包括 javascript）

我試過

@media screen and (max-width:1280px){
#topnav {
  width:100%;
  background:#000000;
}
#brand {
    width:15%;
    display: inline-block;
}
#brand h1 {
    display: inline-block;
  font-family: sans-serif;
  color: #fff;
  font-size: 30px;
  font-style: italic;
  word-spacing: 5px;
  line-height: 1.5;
  margin: 0 0 0 0;
    padding-left: 10%;
}

#search,form,button{
    display: inline-block;
    width: 30%;
    height: 44px;
    text-align: left;
    margin: 0;
    margin-left: 20px;
}

.srch_bar {
    display:inline-block;
    width: 300%;
    border-radius: 5px;
    height: 30px;
    font-size: 20px;
    font-weight: 600;
    padding: 5px;
}
input {
    border: none;
    display: inline-block;
}
button {
    border: none;
    background-color: #fff;
    height: 20px;
    font-size: 20px;
    cursor: pointer;
    width: 10px;
    padding: 0;
    margin-left: 42%;
}
.clr-btn {
    color:#636c72;
}
#link {
    display: inline-block;
    width: 45%;
}
#link a{
    text-decoration: none;
    font-size:20px;
    color: #fff;
    padding-left:1%;
    padding-right:1%;
}
.szp {
    color: #F07330;
    font-size: 20px;
}
.szr {
    color: #F20000;
    font-size: 20px;
}
.szs {
    color: #063780;
    font-size: 22px;
    font-weight: 600;
}
.szu {
    color: #1E7305;
    font-size: 24px;
}

還有

@media screen and (max-width:1024px){
    #topnav {
    width:100%;
    background:#000000;
}
#brand {
    width:17%;
    display: inline-block;
}
#brand h1 {
    display: inline-block;
    font-family: sans-serif;
    color: #fff;
    font-size: 25px;
    font-style: italic;
    word-spacing: 5px;
    line-height: 1.5;
    margin: 0 0 0 0;
    padding-left: 10%;
}

#search,form,button{
    display: inline-block;
    width: 25%;
    height: 44px;
    text-align: left;
    margin: 0;
    margin-left: 15px;
}

.srch_bar {
    display:inline-block;
    width: 330%;
    border-radius: 5px;
    height: 30px;
    font-size: 15px;
    font-weight: 600;
    padding: 5px;
}
input {
    border: none;
    display: inline-block;
}
button {
    border: none;
    background-color: #fff;
    height: 20px;
    font-size: 20px;
    cursor: pointer;
    width: 10px;
    padding: 0;
    margin-left: 42%;
}
.clr-btn {
    color:#636c72;
}
#link {
    display: inline-block;
    width: 53%;
    margin: 0;
}
#link a{
    text-decoration: none;
    font-size:18px;
    color: #fff;
}
.szp {
    color: #F07330;
    font-size: 20px;
}
.szr {
    color: #F20000;
    font-size: 20px;
}
.szs {
    color: #063780;
    font-size: 22px;
    font-weight: 600;
}
.szu {
    color: #1E7305;
    font-size: 24px;
}
}

兩者都有效，但是到了

@media screen and (max-width:768px){

}

它似乎不起作用順便說一句我也有

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在 html 中鏈接，否則我的 @media 1024px 和 1280px 將不起作用

@media screen and (max-width:720px){
    body {
        overflow-x: hidden;
    }

    #links{
        position:absolute;
        right:0px;
        height: 92vh;
        top:8vh;
        background-color: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        transform: translateX(100%);
    }

    .burger {
     display:block;
    }
}

我希望它首先在頁面上不顯示任何內容，以便我知道它可以正常工作

順便說一句，這是我的 html

<html>

 <head>
   <title>Solexton</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" 
    href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
    integrity="sha384- 
    50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
    crossorigin="anonymous">
   <link rel="icon" href="C:\Users\User\Desktop\picas\s.png" type="image/png">
   <link rel="stylesheet" href="C:\xampp\htdocs\wdt\asg\css\style.css" type="text/css">
</head>

<body>
  <div id="topnav">
    <div id="brand">
      <h1 class="logo"><i class="fab fa-stripe-s"></i>olexton</h1>
    </div>
    <div id="search">
      <form action="search.php" method="post">
        <input class="srch_bar" type="text" name="search_key" 
         placeholder="Looking for..."/>
      </form>
        <button class="srch-btn" name="submit"><i class="fas fa-search clr- 
         btn"></i></button>
    </div>
    <div id="link">
      <a href="promo.html"><i class="fas fa-percent szp"></i> Promotions</a>
      <a href="room.html"><i class="fas fa-bed szr"></i>  Rooms</a>
      <a href="booking.html"><i class="far fa-bookmark szs"></i> Saved</a>
      <a href="signin.php"><i class="far fa-user-circle szu"></i> Sign 
       In</a>
    </div>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
</div>

</body>
</html>

3 個解決方案

解決方案1
 1  2019-07-30 07:56:03

您應該編寫從小屏幕到大屏幕的媒體查詢。 因為最后一行 css 代碼覆蓋了之前的 css 行。 例如來自引導程序；

// Small devices (landscape phones, 576px and up)
@media screen and (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media screen and (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media screen and (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

解決方案2
 0  2019-07-30 07:38:43

檢查您是否有其他一些干擾小屏幕尺寸的媒體查詢，您可以使用瀏覽器檢查器，將屏幕尺寸縮放到 720 像素以下，從源（元素選項卡）中選擇您的身體，然后在右側邊欄中檢查顯示屬性的位置放。

也許在其他 CSS 中，相同的元素被定位並設置了 display 屬性。

解決方案3
 0  2019-07-30 07:44:42

根據您提供的代碼，您的媒體查詢正在運行，您只是無法判斷，因為沒有內容。

除非您另外指定，否則瀏覽器將顯示默認為白色背景，根據提供的代碼，一旦瀏覽器調整大小超過720px ，就沒有任何顯示。

向正文添加一些內容並嘗試將瀏覽器的大小調整為相對斷點，或者嘗試添加以下內容以明顯地看到更改。

@media screen and (max-width:768px){
  body {
    display: block;
    background: #000;
  }
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何讓@media(max-width 425px) 單獨工作，而不是跟隨@media(max-width 768px) 為什么@media only screen and (min-width: 768px) 也適用於屏幕寬度小於768px 最大寬度為 768px 時如何通過 flexLayout 隱藏 Div 768px以下的媒體查詢無法正常工作 Bootstrap 768px媒體查詢不起作用 使用CSS覆蓋Bootstrap @media（最小寬度：768px） col-xs不適用於小於768像素的媒體屏幕 @media屏幕和（max-width：800px）不起作用，整個Internet上都在看 媒體查詢不適用於768像素ipad肖像 addveventlistener無法處理768px以上的媒體查詢
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM