@media屏幕和（max-width：800px）不起作用，整个Internet上都在看

Question

Please, someone, help me... In my recent project this function worked perfectly, but now it doesn't... CSS rules @media screen and (max-width:800px) just don't work. 拜托，有人，帮帮我...在我最近的项目中，此功能运行良好，但现在不起作用... CSS规则@media屏幕和（max-width：800px）无效。 I've looked all over the Internet and wasn't able to find the solution, can someone help me, please? 我在Internet上四处查看，但找不到解决方案，请有人帮我吗？

 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>

Answer 1

One problem in your snippet is that you haven't included jQuery. 代码段中的一个问题是您尚未包含jQuery。 Bootstrap needs jQuery in order to perform. Bootstrap需要jQuery才能执行。

I've included jQuery and just for debugging purpose, I've reduced max-width to 150 px and it's now working fine. 我已经包括了jQuery，并且仅出于调试目的，我将max-width减小为150 px ，现在可以正常工作了。

TIP: Open debug window in chrome (rightclick > Inspect or press F12) and when you'll reisize your window, the width will be shown at the top. 提示：在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>

@media屏幕和（max-width：800px）不起作用，整个Internet上都在看

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-01 16:40:21

@media屏幕和（max-width：800px）不起作用，整个Internet上都在看

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-01 16:40:21

解决方案1
0 已采纳 2016-08-01 16:40:21