Why is the Chrome DevTool device toolbar not working correctly with different stylesheets?
I'm not sure if this is a problem with the devtool device toolbar, but given the following html:
<!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>
and these 2 stylesheets:
style_tablet.css
html, body{
height: 100%;
width: 100%;
}
body {
background: black;
}
style_smartphone.css
html, body{
height: 100%;
width: 100%;
}
body {
background: blue;
}
I can see the background change when I reduce the size of the window, but it doesn't change when I switch the width from the devtool device toolbar.
Am I wrong about my media query?
+3
source to share
1 answer
I'm not too sure how your code isn't reacting the way it should, but it's good practice to put it in a stylesheet. Below I have tested quickly.
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>
Style
@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%;
} }
0
source to share