External media query for CSS not working in Chrome

问题

I've been playing with using different CSS files, for different browser sizes (to make the code cleaner and easier to tweak). This works fine in Firefox, but not in IE Edge or 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" />

I also tried:

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

As a test, I put this in the smaller-screen.css file:

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

My HTML is pretty simple:

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

回答1:

Try with just max-width instead of max-device-width:

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

More information about media queries

回答2:

You can simply use this

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

This media query will work properly

Or you can use this

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

来源：https://stackoverflow.com/questions/40217111/external-media-query-for-css-not-working-in-chrome

标签

html

css

media-queries