Chrome DevToolデバイスツールバーが異なるスタイルシートで正しく動作しないのはなぜですか？

私はそれがdevtoolデバイスのツールバーに関連する問題だかどうかわからないんだけど、次のHTML与えられた：Chrome DevToolデバイスツールバーが異なるスタイルシートで正しく動作しないのはなぜですか？

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8" /> 
     <link rel='stylesheet' type='text/css' media='screen and (max-width: 700px)' href='css/style_smartphone.css' /> 
     <link rel='stylesheet' type='text/css' media='screen and (min-width: 701px)' href='css/style_tablet.css' /> 
     <title>test</title> 
    </head> 
    <body> 

    </body> 
    </html>

及びこれらの2スタイルシート：

style_tablet.css

html, body{ 
    height: 100%; 
    width: 100%; 
} 

body { 
    background: black; 
}

をstyle_smartphone.css

html, body{ 
    height: 100%; 
    width: 100%; 
} 

body { 
    background: blue; 
}

バックグラウンドdはウィンドウサイズを小さくすると変更されますが、devtoolデバイスのツールバーから幅を変更すると変更されません。

メディアクエリで間違いをしましたか？

出典

2017-06-19 Koop4

私は私の自宅のPC上でこれをテストし、私はあなたの問題を再現することができました。今日私はChrome Version 58.0.3029.110（64-bit）を使用して私の仕事のMACでそれをテストしました。それは期待通りに動作します...私はPCでもう一度試してみます。 – partypete25

あなたはそれをテストする時間を見つけましたか？ – Koop4

それで、もう少しテストした後、私はMAC上で使用していた、Dreamweaverのライブプレビュー機能を使用するときに動作することを発見しました。それを経験したときにクロームで正常に開くだけで働いていました。 – partypete25

あなたのコードがどのように反応しないかはわかりませんが、スタイルシートに入れるのは良い方法です。以下はすぐにテストしたものです。

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8" /> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <title>test</title> 
</head> 

<body></body> 

</html>

スタイル

@media screen and (max-width: 1000px) and (min-width:300px) { 
    body { 
     background: blue; 
     height: 100%; 
     width: 100%; 
    } } 

@media screen and (min-width: 1001px) { 
    body { 
     background: black; 
     height: 100%; 
     width: 100%; 
    } }

出典

2017-06-19 19:56:29

私は、メディアクエリの制限が何であるか分かりません。 2つのスタイルシートを参照するときや、3つのサイズをクエリしようとするときに、矛盾した振る舞いを見つけました。 –

あなたの提案に感謝しますが、私は問題の解決策を見つける必要があります:) – Koop4

答えて

関連する問題