Question

我必须针对移动设备优化网站。试图通过@media only屏幕来实现，但它对我不起作用。也许有人知道如何正确地把它放在代码中？

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不需要＆＃34;只有＆＃34;，它只能由匹配的媒体读取

Answer 2

这是应该如何做的（移动优先）：

.test {
    width: 200px;
}

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

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

另外，this tutorial should help。

@media only屏幕不起作用

2 个答案: