@media only 屏幕不工作

Question

我必须针对移动设备优化网站。试图通过@media only screen 来做到这一点，但它对我不起作用。也许有人知道如何正确地将其放入代码中？

body {
  background-color: black;
  background-image: url(../images/background.jpg);
  background-size: 100vw 100vh;
}
header {
  box-sizing: border-box;
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
  width: 100vw;
  height: 15vh;
  border-top: 0.5vmin ridge gray;
  border-right: 0.5vmin ridge gray;
  border-left: 0.5vmin ridge gray;
}
header img {
  max-height: 14vmin;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: center;
}
etc.

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link type="text/css" rel="stylesheet" href="css/homepage.css">
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <title>Airinn hotel // Home</title>
</head>

<body>

  <header>
    <img src='images/logo.png' />etc.

Answer 1

你试过有几个 css 吗？第一个，全局（homepage.css），每种支持一个？

<link type="text/css" rel="stylesheet" href="css/homepage.css" />
<!-- Now for "normal" screens" -->
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
<!-- And for mobiles / small screens -->
<link type="text/css" rel="stylesheet" href="css/small.css" media="handheld" />

@media 不需要 "only"，它只会被匹配的媒体读取

Answer 2

应该这样做（移动设备优先）：

.test {
    width: 200px;
}

@media screen and (min-width: 1024px) {
    .test {    
        width: 1000px;
    }
}

演示：http://jsfiddle.net/yzt9zjno/

此外，this tutorial should help。

@media only 屏幕不工作

@media only screen does not work

css

media

mobile