@media屏幕和（最大寬度：800px）不工作，看遍了互聯網

請有人幫助我...在我最近的項目中這個功能完美的工作，但現在它不... CSS規則@media屏幕和（最大寬度：800px）只是不工作。我已經瀏覽了整個互聯網，無法找到解決方案，請有人幫助我嗎？@media屏幕和（最大寬度：800px）不工作，看遍了互聯網

html body{ 
 
    background-color: #fafafa; 
 
    height: 100%; 
 
} 
 
@media screen and (max-width: 800px) { 
 
    html body{background-color:#fff;} 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
     
 
     <!-- Latest compiled and minified CSS --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
     <!-- Optional theme --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
     <!-- Latest compiled and minified JavaScript --> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
     <!-- Google Roboto Fonts --> 
 
     <link href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic,300,100italic,100,500,500italic,700,700italic,900,900italic&subset=cyrillic,cyrillic-ext,latin,latin-ext" rel="stylesheet" type="text/css"> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     
 
     <link href="css/style.css" rel="stylesheet" type="text/css" /> 
 
     
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    
 
    </head> 
 
    <body> 
 
     
 
     <!-- My code --> 
 
     
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    </body> 
 
</html>

程式碼中

來源

2016-08-01 Uros Bojanic

什麼是「不工作」和「不工作」是什麼意思？用一個描述性替代替換不精確的措詞。 – user2864740

你2種顏色幾乎是一樣的，這可能會讓你感到困惑...但是，CSS按預期工作https://jsfiddle.net/jqaf2x26/ –

一個問題是，你還沒有包括jQuery的。 Bootstrap需要jQuery才能執行。

我已經包括jQuery，只是爲了調試目的，我已經將max-width減少到150 px，它現在工作正常。

提示：在chrome中打開調試窗口（右擊>檢查或按F12鍵），當您重新調整窗口寬度時，寬度將顯示在頂部。

html body{ 
 
    background-color: #fff; 
 
    height: 100%; 
 
} 
 
@media screen and (max-width: 150px) { 
 
    html body{background-color:#000;} 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
     <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
     <!-- Latest compiled and minified CSS --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
     <!-- Optional theme --> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
     <!-- Latest compiled and minified JavaScript --> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
     <!-- Google Roboto Fonts --> 
 
     <link href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic,300,100italic,100,500,500italic,700,700italic,900,900italic&subset=cyrillic,cyrillic-ext,latin,latin-ext" rel="stylesheet" type="text/css"> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     
 
     <link href="css/style.css" rel="stylesheet" type="text/css" /> 
 
     
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    
 
    </head> 
 
    <body> 
 
     
 
     <!-- My code --> 
 
     
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    </body> 
 
</html>

來源

2016-08-01 16:40:21

原來我只是使用舊的jQuery ...謝謝！ –

@media屏幕和（最大寬度：800px）不工作，看遍了互聯網

回答

相關問題