Question

我一直在玩不同的CSS文件，用于不同的浏览器尺寸（使代码更清晰，更容易调整）。这适用于Firefox，但不适用于IE Edge或Chrome：

<link rel="stylesheet" media="screen" href="./css/style.css" /> <!-- common css -->
<link rel="stylesheet" media="all and (max-device-width: 767px)" href="./css/smaller-
screen.css" />

我也尝试过：

<link rel="stylesheet" media="(max-device-width: 767px)" href="./css/smaller-screen.css" />

作为测试，我把它放在 small-screen.css 文件中：

body {
    min-width: 400px;
    background: red;
}

我的HTML非常简单：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="iso-8859-1">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Chambres D'hotes New</title>

    <link rel="stylesheet" media="screen" href="./css/style.css" /> <!-- common css -->
    <link rel="stylesheet" media="(max-device-width: 767px)" href="./css/smaller-screen.css" />

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    content here

  </body>
</html>

Answer 1

仅使用max-width代替max-device-width：

<link rel="stylesheet" media="(max-width: 767px)" href="./css/smaller-screen.css" />

More information about media queries

Answer 2

尝试一下。反抗。

<link rel='stylesheet' media='screen and (min-width: 300px) and (max-width: 900px)' href='./css/mobile.css'/>

Answer 3

你可以简单地使用这个

    @media (max-width:767px){
        body {
            min-width: 400px;
            background: red;
        }
    }

此媒体查询将正常运作

或者你可以使用这个

<link rel="stylesheet" media="screen and (max-device-width: 767px)" href="./css/smaller-screen.css" />

CSS的外部媒体查询无法在Chrome中使用

3 个答案:

尝试一下。反抗。