Question

我对使网站具有响应能力有一些疑问。我想让标题在1024px屏幕上变小。但是我的@media代码不起作用。我的代码有什么问题。我还很新，想以这个德国帅哥的教程为例建立一个网站。 https://www.youtube.com/watch?v=kHe17jODCKc&t=146s

HTML：

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width", initial-scale=1.0>
 <title>Jacob's Website</title>

 <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
 <link rel="stylesheet" type="text/css" href="css/style.css">

 <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Mukta:500" rel="stylesheet">
</head>

CSS：

/* HEADER *******************************************************/

header {width: 100%; height: 65px; position: fixed; top: 0; left: 0; background: #fff; box-shadow: 0px 1px 1px #e2e2e2; z-index: 1;}

#logo {width: 140px; float: left; margin: 10px 0 0 50px;}

#logo:hover {opacity: 0.5;}

#logo img {width: 100%;}

header nav {float:right; margin: 10px 50px 0 0; }

header nav ul li {float: left; margin-left: 25px;}

header nav ul li a {font-size: 14px;}

header nav ul li:hover {padding-top: 5px;}

标头的@media代码：

@media screen and (max-width: 1024px) {header {height: auto;}}

如果还有更多需要发布的代码，请告诉我！

Answer 1

我通常采用移动优先方法。

将标题高度设置为65px之类的小值，然后使用min-width作为断点。

header { height: 65px; } /* Will be applied on load */

@media (min-width: 1024px) { 
header { height: 200px; } /* Applied to viewport equal or larger than 1024px */ 
}

先对此进行测试，然后在没有问题的情况下应用自动高度。也许仅仅是自动高度无法满足您的要求。祝你好运！

如何正确设置@media？

1 个答案: