@mediaの画面と（最大幅：800px）が動作しない、インターネット上を見て

私の最近のプロジェクトでは、この機能は完璧に動作しましたが、 @media画面と（max-width：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のを含めていないということです。ブートストラップには、実行するためにjQueryが必要です。

私はjQueryをデバッグ目的のために追加しましたが、max-widthを150 pxに減らしました。現在はうまくいきます。

ヒント：クロムでデバッグウィンドウを開く（右クリック> [検査]または[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）が動作しない、インターネット上を見て

答えて

関連する問題