@media Bildschirm und (max-Breite: 800px) funktioniert nicht, schaute über das Internet

Bitte, jemand, hilf mir ... In meinem letzten Projekt funktionierte diese Funktion perfekt, aber jetzt ist es nicht ... CSS Regeln @media Bildschirm und (max-Breite: 800px) einfach nicht funktionieren. Ich habe überall im Internet nachgeschaut und konnte die Lösung nicht finden, kann mir bitte jemand helfen?@media Bildschirm und (max-Breite: 800px) funktioniert nicht, schaute über das 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>

Quelle

2016-08-01 Uros Bojanic

Was bedeutet "nicht funktionieren" und "nicht funktioniert" bedeuten? Ersetzen Sie den ungenauen Wortlaut durch eine beschreibende Alternative. – user2864740

Sie 2 Farben sind fast die gleichen, die Sie verwirrt haben können ... Aber das CSS funktioniert wie erwartet https://jsfiddle.net/jqaf2x26/ –

Ein Problem in Ihrem Snippet ist, dass Sie jQuery nicht aufgenommen haben. Bootstrap benötigt jQuery, um ausgeführt zu werden.

Ich habe jQuery und nur zum Debuggen Zweck, ich habe max-width zu 150 px reduziert und es funktioniert jetzt gut.

TIPP: Öffnen Sie das Debug-Fenster in Chrome (Rechtsklick> Inspizieren oder drücken Sie F12) und wenn Sie Ihr Fenster reißen, wird die Breite oben angezeigt.

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>

Quelle

2016-08-01 16:40:21

Stellt sich heraus, ich habe nur alte jQuery ... Danke! –

@media Bildschirm und (max-Breite: 800px) funktioniert nicht, schaute über das Internet

Antwort

Verwandte Themen