Блог

Главная - Вопросы по программированию - О @media в CSS

О @media в CSS

#css

Вопрос:

мой вопрос о коде @media в CSS когда я создаю веб-сайт, я использую @media в средствах массовой информации для изменения на многих экранах, подобных этому:

 @media (min-width: 280px) and (max-width: 767px) {
    @media (min-width: 280px) {
        .main-header .main-textmonial {
            font-size: 11px;
        }
    }
    @media (min-width: 320px) {
        .main-header .main-textmonial {
            font-size: 13px;
        }
    }
    @media (min-width: 360px) {
        .main-header .main-textmonial {
            font-size: 15px;
        }
    }
    @media (min-width: 411px) {
        .main-header .main-textmonial {
            font-size: 18px;
        }
    }
    @media (min-width: 450px) {
        .main-header .main-textmonial {
            font-size: 24px;
        }
    }
}

Этот метод правильный или нет?
Есть ли способ лучше этого?

Комментарии:

1. Это допустимый метод

Ответ №1:

Для этого запроса @media это единственный способ , которым можно использовать другой размер экрана, заданный в настройках спецификации с помощью css

Ответ №2:

Кажется, это действительно так. Я могу показать Вам, как мне нравится обращаться с RWD с помощью @media

  1. Создайте такой микс
 @mixin breakpoint($point) {
   @if $point == desktop {
     @media (min-width: 70em) { @content ; }}
   @else if $point == laptop {
     @media (min-width: 64em) { @content ; }}
   @else if $point == tablet {
     @media (min-width: 50em) { @content ; }}
   @else if $point == phablet {
     @media (min-width: 37.5em)  { @content ; }}  
     @else if $point == mobileonly { 
       @media (max-width: 37.5em)  { @content ; }}
}
  1. Используйте его вот так
 .podcasts {
  margin: 1em auto;
  @include breakpoint(phablet){
  width: 100%;
  }
}

Это просто предложение, может быть, оно Вам понравится 🙂

Ответ №3:

Да, это правильный метод. Возможно, вы также можете удалить дублированный чек на @media (минимальная ширина: 280 пикселей), как это:

 @media (min-width: 280px) and (max-width: 767px) {
    .main-header .main-textmonial {
        font-size: 11px;
    }
    @media (min-width: 320px) {
        .main-header .main-textmonial {
            font-size: 13px;
        }
    }
    @media (min-width: 360px) {
        .main-header .main-textmonial {
            font-size: 15px;
        }
    }
    @media (min-width: 411px) {
        .main-header .main-textmonial {
            font-size: 18px;
        }
    }
    @media (min-width: 450px) {
        .main-header .main-textmonial {
            font-size: 24px;
        }
    }
}

Но опять же, то, как вы это сделали, справедливо для этого запроса @media.

Метки: