Как правильно настроить @media? - PullRequest
Новая
       22

Как правильно настроить @media?

0 голосов
/ 01 февраля 2019

У меня есть вопрос о том, как сделать сайт отзывчивым.Я хочу, чтобы заголовок был меньше на 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;}}

Если естьесли у вас есть код, который нужно опубликовать, дайте мне знать!

1 Ответ

0 голосов
/ 01 февраля 2019

Я обычно хожу с мобильного первого подхода.

Установите для высоты заголовка что-нибудь маленькое, например 65px, затем используйте минимальную ширину в качестве точки останова. 

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

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

Сначала проверьте с этим, затем примените автоматическую высоту, если все в порядке.Может быть, это просто то, что автоматическая высота не делает то, что вы хотите.Удачи!

...