Question

在我的html页面中，我使用的是基于media query的{{1}}，但它无效。

html：

css

css：

<!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">

我还需要做什么？

Answer 1

有一个“和”缺失。您需要将[media]属性中的每个语句与“and”组合：

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

哦，嘿，你的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]-->

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

Answer 3

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

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

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

基于HTML5媒体查询的CSS链接不起作用

3 个答案: