我必须针对移动设备优化网站。试图通过@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.最佳答案
这是应该如何完成的(移动优先):
.test {
width: 200px;
}
@media screen and (min-width: 1024px) {
.test {
width: 1000px;
}
}
关于css - @media only 屏幕不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33416210/