Блог

Я создаю адаптивный дизайн для своего сайта, и я довольно много читал о медиа-запросах и точках останова. Я понимаю, что нет установленных точек останова, поскольку сейчас так много экранов, и нам нужно выбрать лучший, который соответствует нашему макету. Но я не уверен, нормально ли иметь разные точки останова для каждого элемента, оформленного отдельно, или лучше сгруппировать все css в общую точку останова, которую я использую на всем своем сайте.Вот пример, объясняющий, что я имею в виду под этим:

Прямо сейчас я делаю что-то вроде этого:

Способ 1:

  .search_bar { 
    width: 30%;
    float: right;
 }
  /* Media Queries for Search Bar */
 @media only screen and (max-width: 900px) {
    .search_bar { 
        width: 40%;
    }
 }    
 @media only screen and (max-width: 780px) {
    .search_bar { 
        width: 50%;
    }   
 }
 @media only screen and (max-width: 500px) {
    .search_bar { 
        width: 100%;
    }   
 }

 .side_bar_wrap {
    width: 300px;
 }
 /* Media Queries for Side Bar */
@media only screen and (max-width: 850px) {
     .side_bar_wrap {
        width: 250px;
     }      
 }
 @media only screen and (max-width: 600px) {
     .side_bar_wrap {
        width: 150px;
     }  
 }
 @media only screen and (max-width: 400px) {
     .side_bar_wrap {
        display:none;
     }  
 }

 etc..etc..
  

Если вы заметили выше, у меня нет установленного количества точек останова для всего моего шаблона. Я определил разные точки останова для каждого элемента в зависимости от того, как ведут себя отдельные элементы при разных размерах экрана. Это дает мне точный способ выравнивания отдельных элементов, а не определения всех элементов в общих точках останова. Чего я не знаю, так это того, рекомендуется ли использовать вышеуказанный метод (или его можно использовать) или я не должен делать это так? Нужно ли мне изменить приведенное выше на что-то вроде этого, где я создаю общие точки останова для всего своего веб-сайта и добавляю стили, сгруппированные вместе в одну из этих общих точек останова? Что-то вроде:

Способ 2:

 .search_bar { 
    width: 30%;
    float: right;
}
.side_bar_wrap {
    width: 300px;
}

/* Common Breakpoints to my entire site */
 /* Media Queries for all elements are grouped into one of these */
 @media only screen and (max-width: 900px) {
     .side_bar_wrap {
        width: 250px;
     }  
    .search_bar { 
        width: 40%;
    }        
 }
 @media only screen and (max-width: 750px) {
     .side_bar_wrap {
        width: 150px;
     }  
     .search_bar { 
        width: 50%;
    }
 }
 @media only screen and (max-width: 500px) {
     .side_bar_wrap {
        display:none;
     }  
     .search_bar { 
        width: 100%;
    }
 }
  

Является ли мой первый метод допустимой практикой или я не должен так поступать? Может кто-нибудь посоветовать мне, если я делаю это правильно или неправильно, плз?

Вы ищете лучшие практики, и решения для подобных вопросов часто основаны в первую очередь на мнениях. Тем не менее, я постараюсь дать объективный ответ.

На мой взгляд, наиболее удобным вариантом было бы использовать метод 2, т. Е. Свести селекторы мультимедиа к минимуму:

• Это легко позволяет разделить CSS для разных мультимедийных устройств на отдельные файлы.
• У вас есть лучшее представление о том, что нужно настроить для разных макетов: вместо того, чтобы разбрасывать их, вы храните их в одном месте.
• Это уменьшает размер выходного кода CSS, что означает незначительно более быстрое время загрузки.

Минусы в том, что вы разбрасываете семантически связанные определения, т. Е. В этом примере правила для #menu разбросаны повсюду:

 #menu { base rules ... }
other base selectors and rules ...

@media only screen and (max-width: 500px) { #menu { custom rules 1 } }
@media only screen and (max-width: 700px) { #menu { custom rules 2 } }
  

Одним из решений этого было бы отказаться от попыток определить базовые правила и определить все, что необходимо настроить в селекторах мультимедиа. Это не очень хороший подход, поскольку вы легко нарушаете принцип «Не повторяйся«. Другим, лучшим подходом было бы ввести базовые контейнеры, например #menu-container , которые имеют постоянные базовые правила, а затем #menu «реализацию», в которой правила определены исключительно в @media селекторах.
В любом случае, смысл не в том, чтобы смешивать базовые правила с правилами, зависящими от устройства, поскольку это создает путаницу при чтении и изменении кода. (Исключением являются правила, которые определяют макет по умолчанию на всех устройствах; я бы сохранил эти правила, зависящие от конкретного устройства.)