我想讓我的頁面響應移動，但似乎媒體查詢不起作用，為什么？

Question

所以我想做一個問答游戲，現在我想讓它有點響應。 我首先制作了桌面，現在我正在為 pc 制作它。 我嘗試使用媒體查詢，但它似乎根本不起作用。 我錯過了什么？ 我嘗試使用 class 而不是 body，但它仍然無法正常工作。 我排除了 js，因為它是不必要的

 @import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600); body { font-size: 12px; font-family: 'Work Sans', sans-serif; color: #333; font-weight: 300; text-align: center; background-color: #f8f6f0; } h1 { font-weight: 300; margin: 0px; padding: 10px; font-size: 20px; background-color: #444; color: #fff; }.question { font-size: 3em; margin-bottom: 10px; }.answers { margin-bottom: 20px; text-align: left; display: inline-block; font-size: 3em; }.answers label { display: block; margin-bottom: 10px; } input[type=radio] { height: 2em; width: 2em; } button { font-family: 'Work Sans', sans-serif; font-size: 22px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin: 20px 10px; z-index: 3; display: block; font-size: 2em; } button:hover { background-color: #38a; }.slide { position: static; left: 0px; top: 0px; width: 100%; z-index: 1; display: none; }.active-slide { display: block; z-index: 2; }.quiz-container { position: static; height: auto; margin-top: 40px; } @media (max-width: 600px) { body { font-size: 20px; } }

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" href="QuizTransition.css"> </head> <body> <div class="container"> <div class="quiz-container"> <div id="quiz"></div> </div> <button id="previous">Intrebarea precedenta</button> <button id="next">Urmatoare intrebare</button> <div id="results"></div> </div> <script src="QuizLogic.js"></script> </body> </html>

Answer 1

我在JS Fiddle中嘗試過使用您的代碼。

看起來你在@media query中犯了一個小錯誤

 @media only screen and (max-width: 768px) {
  body {
    background-color: red;
  }
}

希望這會有所幫助。 請go通過W3學校

Answer 2

你的代碼沒問題

用清晰可見的東西進行測試。 我使用了背景顏色，並且它正在工作使用它來提高可讀性-... ...

The width=device-width key-value pair sets the width of the viewport to the width of the device. 
The initial-scale=1 key-value pair sets the initial zoom level when visiting the page.

始終保持較小的 scope 或縮小范圍以適應媒體查詢屏幕尺寸。

 @import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600); body { font-size: 12px; font-family: 'Work Sans', sans-serif; color: #333; font-weight: 300; text-align: center; background-color: #f8f6f0; } h1 { font-weight: 300; margin: 0px; padding: 10px; font-size: 20px; background-color: #444; color: #fff; }.question { font-size: 3em; margin-bottom: 10px; }.answers { margin-bottom: 20px; text-align: left; display: inline-block; font-size: 3em; }.answers label { display: block; margin-bottom: 10px; } input[type=radio] { height: 2em; width: 2em; } button { font-family: 'Work Sans', sans-serif; font-size: 22px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin: 20px 10px; z-index: 3; display: block; font-size: 2em; } button:hover { background-color: #38a; }.slide { position: static; left: 0px; top: 0px; width: 100%; z-index: 1; display: none; }.active-slide { display: block; z-index: 2; }.quiz-container { position: static; height: auto; margin-top: 40px; } @media (max-width: 1200px) { body { background: blue; } } @media (max-width: 600px) { body { background: red; } } @media (max-width: 400px) { body { background: yellow; } }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="QuizTransition.css" type="text/css"> </head> <body> <div class="container"> <div class="quiz-container"> <div id="quiz"></div> </div> <button id="previous">Intrebarea precedenta</button> <button id="next">Urmatoare intrebare</button> <div id="results"></div> </div> <script src="QuizLogic.js"></script> </body> </html>

Answer 3

在使用面向寬度的媒體查詢時，最好先從移動設備開始。 這意味着您的 CSS 的第一部分應該是 styles ，這是您網站的標准配置，完全不需要媒體查詢就可以在移動設備寬度下工作。

然后，您將使用 min-width 添加從給定寬度開始的媒體查詢，因此：

@media (min-width: 720px) {
  body { background: red;}
}

您的媒體查詢有一個沒有聲明覆蓋的漏洞，但是如果您需要一個中間區域，則語法如下所示：

@media screen and (min-width: 768px) and (max-width: 880px) {
  body { background: pink;}
}

我希望這會有所幫助。

我想讓我的頁面響應移動，但似乎媒體查詢不起作用，為什么？

問題描述

3 個解決方案

解決方案1
0 2020-04-27 16:03:45

解決方案2
0 2020-04-27 17:04:48

解決方案3
0 2020-04-27 17:27:03

我想讓我的頁面響應移動，但似乎媒體查詢不起作用，為什么？

問題描述

3 個解決方案

解決方案1 0 2020-04-27 16:03:45

解決方案2 0 2020-04-27 17:04:48

解決方案3 0 2020-04-27 17:27:03

解決方案1
0 2020-04-27 16:03:45

解決方案2
0 2020-04-27 17:04:48

解決方案3
0 2020-04-27 17:27:03