HTML5 Media query based css link not working
Question
In my html page, i am using the media query based css but it's not working.
html :
<!DOCTYPE>
<html>
<!--[if IE 9]>
<html lang="en-us" class="ie9">
<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/login.css">
<link rel='stylesheet' media='screen(min-device-width : 320px) and (max-device-width : 480px)' href='../css/max480.css' /> //properly linked.
<title>Welcome to ClearBid Login</title>
</head>
<body class="loginPage">
css :
.loginContent > section {
background: none; //it always visible.
}
What else i need to do?
3 answers
solution1
1 ACCPTED 2015-01-16 16:08:45
There's a "and" missing. You need to combine every statement in the [media] attribute with a "and":
screen and (min-device-width: 320px) and (max-device-width: 480px)
Oh hey and there's an error on top of your html file with the conditional comments. IE9 sees two opening HTML-Elements, which could cause the compatibility mode. Correct would be:
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us" class="not-ie9">
<!--<![endif]-->
solution2
0 2015-01-16 16:26:05
Replace your line with the following:
<link rel='stylesheet' media='screen and (min-device-width: 320px) and (max-device-width: 480px)' href='../css/max480.css' />
You can also use the CSS instead:
@media screen and (min-width: 320px) and (max-width: 480px) {
// your style
}
solution3
-1 2015-01-16 15:56:07
You can add the media query into the css file itself. So in css:
@media screen and (min-width:320px) and (max-width:480px) {
.loginContent > section {
background: none; //it always visible.
}
}
This will reduce HTTP requests once you add more media queries.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.