@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）不工作，看遍了互联网

回答

相关问题