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

在我的 html 页面中,我使用基于 media querycss 但它不起作用。

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/…
  • 我使用:&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; - 不行吗? - 你能看看我提出问题的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 请求。

    【讨论】:

      猜你喜欢
      • 2013-05-30
      • 1970-01-01
      • 2023-03-09
      • 1970-01-01
      • 1970-01-01
      • 2013-08-14
      • 2015-09-06
      • 2013-03-01
      相关资源
      最近更新 更多