媒體查詢響應式設計

@media only screen and (min-width: 600px) { 
 

 
nav ul{ 
 
    transform: translateY(0); 
 
    box-shadow: 0 0 5px rgba(0,0,0, .7); 
 
    transition: all .5s; 
 
    } 
 
nav li{ 
 
    flex: none; 
 
    width: 100%; 
 
    border-bottom: solid 1px #777; 
 
    } 
 
    nav input[type="checkbox"]:checked + ul{ 
 
    transform: translateY(-100%); 
 
    width: 100%; 
 
    background: #999; 
 
    transition: all .5s; 
 
    } 
 
    nav label{display: block;} 
 
    nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
 
    background: #777; 
 
    color: #fff; 
 
    } 
 

 
    #css-toggle-menu{ 
 
    float:right; 
 
    margin: 10px; 
 
    } 
 

 
} 
 

 

 

 

 
/*Desktop*/ 
 

 

 
@media (min-width: 961px) and (max-width: 2000px) { 
 
nav{ 
 

 
float:left; 
 
color:white; 
 

 

 

 
} 
 

 

 

 
nav ul li.active a { 
 
background-color: none; 
 
    color: white; 
 
    text-decoration:none; 
 
} 
 
    a:hover { 
 

 
    color:black; 
 
    background-color:#00E3FF; 
 

 
    } 
 

 

 

 
nav ul li a:visited { 
 
color:black; 
 
text-decoration:none; 
 
} 
 

 
}

<header> 
 
    <nav> 
 
    <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
 
    <ul class="main"> 
 
      <li><a class="space" href="">Home</a></li> 
 
      <li><a class="space" href="">Programs</a></li> 
 
      <li><a class="space" href="">Assignments</a></li> 
 
      <li><a class="space" href="">Enroll</a></li> 
 
      <li><a class="space" href="">Contact</a></li> 
 

 
    </ul> 
 
    <label for="css-toggle-menu" id="css-toggle-menu"></label> 
 
    </nav> 
 
</header>

隨着媒體查詢我認爲，當你在平板電腦和臺式機對其進行設置，一旦你達到這些，其他的佈局像平板電腦會自動消失，當你切換參數到桌面。但是，我遇到了一個問題，即當我從平板電腦模式切換到桌面時，我的導航欄中的移動和平板電腦屏幕會顯示在桌面上。在我的桌面上，我只想在頁面頂部有一個水平導航欄。我沒有把任何CSS放入平板電腦導航欄，所以我不知道如何在桌面上覆蓋它。在理解這個媒體查詢問題時，我真的可以使用一些幫助。謝謝！

這裏是一個的jsfiddle：https://jsfiddle.net/ma28j5kd/ （我知道小提琴是不漂亮，所以我提前道歉）

HTML：

<header> 
    <nav> 
    <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
    <ul class="main"> 
      <li><a class="space" href="">Home</a></li> 
      <li><a class="space" href="">Programs</a></li> 
      <li><a class="space" href="">Assignments</a></li> 
      <li><a class="space" href="">Enroll</a></li> 
      <li><a class="space" href="">Contact</a></li> 

    </ul> 
    <label for="css-toggle-menu" id="css-toggle-menu"></label> 
    </nav> 
</header>

CSS：

平板電腦：

@media only screen and (min-width: 600px) { 

nav ul{ 
    transform: translateY(0); 
    box-shadow: 0 0 5px rgba(0,0,0, .7); 
    transition: all .5s; 
    } 
nav li{ 
    flex: none; 
    width: 100%; 
    border-bottom: solid 1px #777; 
    } 
    nav input[type="checkbox"]:checked + ul{ 
    transform: translateY(-100%); 
    width: 100%; 
    background: #999; 
    transition: all .5s; 
    } 
    nav label{display: block;} 
    nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
    background: #777; 
    color: #fff; 
    } 

    #css-toggle-menu{ 
    float:right; 
    margin: 10px; 
    } 

}

桌面：

@media (min-width: 961px) and (max-width: 2000px) { 
nav{ 

float:left; 
color:white; 



} 



nav ul li.active a { 
background-color: none; 
    color: white; 
    text-decoration:none; 
} 
    a:hover { 

    color:black; 
    background-color:#00E3FF; 

    } 



nav ul li a:visited { 
color:black; 
text-decoration:none; 
} 

}

來源

2016-11-20 Cakers

你應該在問題本身提供[MCVE。您在代碼中提出的問題中沒有媒體問題。這個例子看起來並不是很簡單，你可以用每個媒體查詢中的規則集替換它來顯示你想要實現的目標。此外，請使用[用於實時演示的內置功能]（https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。 – Quentin

您誤解了@ @ media'查詢的工作方式。 '@ media'-queries應該覆蓋CSS中設置的以前的規則 - 如果你希望他們完成接管，你將不得不在他們應該工作時提供最小寬度和最大寬度，但是，那不是他們的意圖。您絕不應該將媒體查詢分配到「桌面」 - 桌面是您的出發點，您先創建了什麼，然後在屏幕上的內容開始重疊時爲較小的屏幕創建斷點，或者爲了良好的佈局和用戶友好而變得太小。所以你需要從頭開始。 – junkfoodjunkie

-1

我所做的是在特定的媒體查詢中獲取樣式。

/* smartphones, iPhone, portrait 480x320 phones */ 
 
@media (min-width:321px) and (max-width: 480px) { 
 
\t .image-display { display: block; } 
 
} 
 

 
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
 
@media (min-width:481px) and (max-width: 640px) { 
 
\t .image-display { display: none; } 
 
}

來源

2016-11-20 22:45:09 levinjay

媒體查詢響應式設計

回答

相關問題