Обработка и группировка свойств CSS для различных мобильных точек останова - PullRequest
Новая
       19

Обработка и группировка свойств CSS для различных мобильных точек останова

0 голосов
/ 11 июня 2019

Хорошо, так что это может быть очень простой / очевидный вопрос, поэтому я прошу прощения, если это глупый вопрос, но не знал, где еще спросить.Но при использовании CSS и медиа-запросов для адаптивного макета, я должен повторно использовать код CSS внутри медиа-запросов?Например: 

h1 {
font-size:14px;
margin:0;
padding:0;
}

@media (min-width:768px) {

h1 {
font-size:12px;
margin:0;
padding:0;
}

}

Или это правильный метод? 

h1 {
font-size:14px;
margin:0;
padding:0;
}

@media (min-width:768px) {

h1 {
font-size:12px;
}

}

И с группированием свойств css относительно точек останова.Должен ли я сгруппировать все свойства CSS для каждой точки останова?Или просто сделать это по мере необходимости?Например:

Первый метод 

        h1 {
        font-size:14px;
        margin:0;
        padding:0;
        }

        h2 {
        font-size:12px;
        margin:0;
        padding:0;
        }

        @media (min-width:768px) {

        h1 {
        font-size:12px;
        margin:0;
        padding:0;
        }

        h1 {
        font-size:10px;
        margin:0;
        padding:0;
        }

        }

//Other CSS properties for this page/site

    #page-footer .footer-bot {
        background-color:#24262b;
        font-family:'PT Sans',sans-serif;
        font-weight:400;
        text-transform:uppercase;
        font-size:10px;
        color:#adadad;
        letter-spacing:.3px;
        line-height:18px;
        padding-top:5px;
        padding-bottom:5px;
    }

    @media (min-width:768px) {

        #page-footer .footer-bot {
            line-height:25px;
            padding-top:0;
            padding-bottom:0;
        }

    }

Или во втором методе дождитесь конца скрипта CSS и выполните все изменения точки останова в самом конце в одной группе для каждой точки останова.Я хочу использовать? 

        h1 {
        font-size:14px;
        margin:0;
        padding:0;
        }

        h2 {
        font-size:12px;
        margin:0;
        padding:0;
        }

    #page-footer .footer-bot {
        background-color:#24262b;
        font-family:'PT Sans',sans-serif;
        font-weight:400;
        text-transform:uppercase;
        font-size:10px;
        color:#adadad;
        letter-spacing:.3px;
        line-height:18px;
        padding-top:5px;
        padding-bottom:5px;
    }

//Other CSS properties for this page/site

    @media (min-width:768px) {

        h1 {
        font-size:12px;
        margin:0;
        padding:0;
        }

        h1 {
        font-size:10px;
        margin:0;
        padding:0;
        }

        #page-footer .footer-bot {
            line-height:25px;
            padding-top:0;
            padding-bottom:0;
        }

    }

1 Ответ

1 голос
/ 11 июня 2019

Это правильный метод для использования точек останова медиазапроса. 

h1 {
font-size:14px;
margin:0;
padding:0;
}

@media (min-width:768px) { 
 h1 {
  font-size:12px;
 } 
}

Добавляйте только тот код, который вы хотите внести в точки останова.Нет необходимости повторять один и тот же код в медиа-запросе.

О группировке CSS вы можете использовать оба метода.Если вы использовали Первый метод , ваш код будет таким длинным.Итак, я предлагаю вам пойти на второй метод

...