我有一些关于使网站响应的问题。我想让标题在 1024 像素的屏幕上变小。但是我的@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;}
header 的@media 代码:
@media screen and (max-width: 1024px) {header {height: auto;}}
如果需要发布更多代码，请告诉我!
最佳答案
我通常采用移动优先的方法。
将标题高度设置为 65px 之类的小值，然后使用最小宽度作为断点。
header { height: 65px; } /* Will be applied on load */
@media (min-width: 1024px) {
header { height: 200px; } /* Applied to viewport equal or larger than 1024px */
}
先测试一下，如果没问题，再应用自动高度。也许只是自动高度没有达到您的要求。祝你好运!
关于css - 如何正确设置@media？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54481374/