基于 HTML5 媒体查询的 css 链接不起作用答案

【问题标题】：HTML5 Media query based css link not working基于 HTML5 媒体查询的 css 链接不起作用
【发布时间】：2015-03-15 06:44:37
【问题描述】：

在我的 html 页面中，我使用基于 media query 的 css 但它不起作用。

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.
}

我还需要做什么？

【问题讨论】：

一个简短的演示会更有帮助。

标签： css html

【解决方案1】：

缺少一个“和”。您需要将 [media] 属性中的每个语句与“and”结合起来：

screen and (min-device-width: 320px) and (max-device-width: 480px)

哦，嘿，您的带有条件 cmets 的 html 文件顶部有一个错误。 IE9 看到两个打开的 HTML 元素，这可能导致兼容模式。正确的是：

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us" class="not-ie9">
<!--<![endif]-->

【讨论】：

但似乎在 ie9 中 screen and (min-width:320px) 有效，但 min-device-width: 320px - 无效
您是否打开了兼容模式？在此处查看第一个答案stackoverflow.com/questions/6418139/…
我使用：<meta http-equiv="X-UA-Compatible" content="IE=edge"> - 不行吗？ - 你能看看我提出问题的html吗

【解决方案2】：

将您的行替换为以下内容：

<link rel='stylesheet' media='screen and (min-device-width: 320px) and (max-device-width: 480px)' href='../css/max480.css' />

您也可以改用 CSS：

@media screen and (min-width: 320px) and (max-width: 480px) {
  // your style
}

【讨论】：

【解决方案3】：

您可以将媒体查询添加到 css 文件本身。所以在css中：

@media screen and (min-width:320px) and (max-width:480px) {
    .loginContent > section {
          background: none; //it always visible.
    }
}

一旦您添加更多媒体查询，这将减少 HTTP 请求。

【讨论】：