Исправлен заголовок с переменной высотой

Question

У меня заголовок с высотой 60 пикселей, когда ширина документа больше 760 пикселей. Таким образом, тело отображается чуть ниже заголовка и без проблем, но когда ширина становится меньше, высота равна двум линиям (120 пикселей), поэтому тело частично скрывается сверху.

Как я могу это решить?

Вот код, я использую:

.main_header { 
    width:100%; 
    height:auto !important; 
    background-color:#F2F2F2; 
    border-bottom:1px solid #CCC; 
    position:fixed; 
    top:0px; 
    z-index:100; 
} 
.main_body { 
    margin:70px auto; 
} 

Примечание: страница отзывчивая.

Answer 1

Вы можете установить границу .main-body сперва, чтобы быть 120px, которая будет применяться ко всем размерам окон. Затем вы можете переопределить маржу с определенной шириной, используя медиа-запрос. Примечание. При использовании сокращенного CSS-заголовка будут затронуты верхние и нижние поля main-body.

<style> 
.main_body { 
    margin:120px auto; 
} 

@media(min-width: 761px){ 
    .main_body { 
     margin:70px auto; 
    } 
} 
</style> 

СМИ Запрос документации: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries