Медиазапросы: Как таргетировать настольные, планшетные и мобильные компьютеры?

Я проводил некоторые исследования по медиа-запросам и до сих пор не совсем понимаю, как нацелить их на устройства определенных размеров.

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

Некоторые примеры, которые я нашел:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

Или:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

Как вы думаете, какими должны быть эти 'точки останова' для каждого устройства?

Quantastical
Редактировал вопрос 2-го мая 2013 в 1:06
Программирование
css3 css mobile tablet media-queries
16-го июня 2011 в 10:57
54 просмотров
Комментарии к вопросу (3)
Решение

IMO это лучшие точки отрыва:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Редактирование: Доработано для лучшей работы с сеткой 960:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

На практике многие дизайнеры переводят пиксели в ems, в основном потому, что ems лучше подходит для масштабирования. При стандартном масштабировании 1em === 16px. Умножьте пиксели на 1em/16px, чтобы получить ems. Например, 320px === 20em.

В ответ на комментарий: min-width является стандартом в "mobile-first" дизайне, где вы начинаете с проектирования для самых маленьких экранов, а затем добавляете все больше и больше медиа-запросов, работая над все большими и большими экранами. Независимо от того, предпочитаете ли вы min-, max- или их комбинации, следите за порядком следования правил, помня, что если несколько правил соответствуют одному и тому же элементу, более поздние правила отменяют более ранние.

Комментарии (16)

Если вы хотите указать устройство, то просто напишите min-device-width. Например:

Для iPhone

@media only screen and (min-device-width: 480px){}

Для планшетов

@media only screen and (min-device-width: 768px){}

Вот несколько хороших статей:

Комментарии (10)

Дон'т ориентированы на конкретные устройства или размеры!

В мудрость является не ориентированы на конкретные устройства или размеры, но переосмыслить термин 'бряк':

  • разработка сайта для мобильная, используя процентные или EMS, а не в пикселях,
  • затем попробовать ее в большом видовом и внимание, где он начинает глючить,
  • редизайн макета и добавить запрос в CSS только для обработки сломанных деталей,
  • повторите процесс, пока вы не дойдете до следующей точки останова.

Вы можете использовать responsivepx.com, чтобы найти 'естественной' точки останова, как в 'точки останова мертвых' Марк Драммонд.

Использовать естественные точки останова

В 'контрольных точек' потом стал реальная точка, в которой ваше мобильное конструкция начинает 'прорваться' т. е. перестанет быть полезной или визуально приятным. Если у вас есть хороший мобильный сайт, без медиа-запросы, вы можете перестать беспокоиться о конкретных размерах и просто добавить медиа-запросы, которые обрабатывают последовательно большие видовые окна.

Если вы'повторно не пытается прикрепить конструкцию к точному размеру экрана, этот подход работает на устраняя необходимость для конкретных устройств. В целостность самой конструкции в каждой контрольной точке гарантирует, что он будет держать на любой размер. Другими словами, если меню/содержание раздела/Все, что перестает быть полезной определенного размера, дизайн останова для этого размер, не для конкретного размера устройства.

Увидеть Lyza Гарднер'ы пост на поведенческой точки останова, а также Zeldman'ы пост о Итан Маркотт и как отзывчивый веб-дизайн эволюционировал от идеи intitial.

Использовать семантическую разметку

Кроме того, проще и более семантической структуры DOM с навигация, заголовок, главная, раздел, подвал и др. (избегая мерзости, как див класс="по шапке" В с вложенной внутри див теги) тем легче будет инженеру отзывчивость, особенно избегая плавает с помощью CSS и макет сетки (Сара Drasner'ы сетка генератор является отличным инструментом для этого) и основе для оформления повторного заказа по вашему дизайн задний план.

Dave Everitt
Редактировал ответ 3-го сентября 2019 в 8:28
Комментарии (9)

  1. Я использовал этот сайт, чтобы найти разрешение и разработал CSS в соответствии с фактическими цифрами. Мои цифры довольно сильно отличаются от приведенных выше ответов, за исключением того, что мой CSS действительно попадает в желаемые устройства.

  2. Кроме того, располагайте этот отладочный код сразу после медиазапроса. например:

    @media only screen and (min-width: 769px) and (max-width: 1281px) {
  /* для экранов планшетов с диагональю 10 дюймов */
  body::before {
    content: "планшетный до некоторого настольного медиазапрос (769 > 1281) выстрелил";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); /* Полупрозрачный желтый */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }
}

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

loxsat
Редактировал ответ 12-го января 2019 в 10:25
Комментарии (0)

Лучшие останова рекомендуется на начальной загрузки Twitter

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }
Комментарии (0)

Медиа-запросы для обычных точек останова устройства 

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Комментарии (0)
  1. Дополнительные небольшие устройства (телефоны, до 480px)
  2. Небольшие устройства (планшеты, 768px и выше)
  3. Средний техникой (большой пейзаж планшетов, ноутбуков и настольные компьютеры, 992px и выше)
  4. Большой устройств (большие компьютеры, 1200px и выше)
  5. портрет е-ридеры (НУК/Киндл), поменьше таблеток - мин-ширина:481px
  6. портрет планшетов, айпад портрет, пейзаж читалок - мин-ширина:641px
  7. таблетки, пейзаж для iPad, Ло-Рес ноутбуков - мин-ширина:961px
  8. HTC одно устройство-ширина: 360px устройство-высота: 640 пикселей -в WebKit-устройства-пикселей соотношение: 3
  9. Samsung Galaxy устройства-С2 ширина: 320 пикс устройство-высота: 534px -в WebKit-устройства-пикселей соотношение: 1.5 (мин ... МОЗ-устройства-пикселей соотношение: 1.5), (-о-мин-устройства-пикселей соотношение: 3/2), (мин-устройства-пикселей соотношение: 1.5
  10. Samsung Галактика S3 устройство-ширина: 320px устройство-высота: 640 пикселей -в WebKit-устройства-пикселей соотношение: 2 (мин ... МОЗ-устройства-пикселей соотношение: 2), - старшего Firefox браузеров (до в Firefox 16) -
  11. Samsung Galaxy устройства-С4 ширина: 320 пикс устройство-высота: 640 пикселей -в WebKit-устройства-пикселей соотношение: 3
  12. LG Нексус устройства-ширина 4: 384px устройство-высота: 592px -в WebKit-устройства-пикселей соотношение: 2
  13. Асус Нексус 7 устройства-ширина: 601px устройство-высота: 906px -в WebKit-мин-устройства-пикселей соотношение: 1.331) и (-в WebKit-Макс-устройства-пикселей соотношение: 1.332)
  14. iPad 1 и 2, устройство Мини-айпад ширина: 768px по устройство-высота: 1024 Пикс.- в WebKit-устройства-пикселей соотношение: 1
  15. устройства iPad-ширина 3 и 4: 768px по устройство-высота: 1024 Пикс.- в WebKit-устройства-пикселей соотношение: 2)
  16. устройство-айфон 3Г ширина: 320 пикс устройство-высота: 480 пикселей -в WebKit-устройства-пикселей соотношение: 1)
  17. устройство-iPhone 4 в ширина: 320 пикс устройство-высота: 480 пикселей -в WebKit-устройства-пикселей соотношение: 2)
  18. устройство-iPhone 5 в ширина: 320 пикс устройство-высота: 568px -в WebKit-устройства-пикселей соотношение: 2)
Комментарии (1)

Это's не вопрос подсчета пикселей, это's дело фактический размер (в мм или дюймах) символов на экране, который зависит от плотности пикселей. Отсюда и"мин-ширина:" и "Макс-ширина:" и бесполезны. Полное объяснение этого вопроса здесь: https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio

на "@СМИ" запросы учитывать пиксели считать и устройство пикселя соотношение, в результате чего на "виртуальное разрешение" и что вам нужно на самом деле учитывать при проектировании вашей страницы: если ваш шрифт 10 ПКС с фиксированной шириной и "виртуальное разрешение по горизонтали" это 300 пикселей, 30 символов будут необходимы, чтобы заполнить строку.

Комментарии (1)

Поскольку есть много различных размеров экрана, который всегда и скорее всего всегда будут меняться лучший способ пойти состоит в том, чтобы ваша точки разрыва и мультимедиа запросы на ваш дизайн.

Самый простой способ пойти об этом заключается, чтобы захватить ваши завершен дизайн рабочего стола и открыть его в веб-браузере. Термоусадочная экран медленно, чтобы сделать его более узким. Наблюдать, чтобы увидеть, когда конструкция начнет, моя душа;перерыв" ПО, или выглядит ужасно и тесно. На данный момент точки останова с медиа-запрос не потребуется.

Это'ы, общие для создания трех наборов медиа-запросы для настольного компьютера, планшета и телефона. Но если ваш дизайн выглядит на все три, зачем заморачиваться со сложностью добавления трех различных медиа-запросы, которые не являются необходимыми. Делать это по мере необходимости!

loxsat
Редактировал ответ 12-го января 2019 в 10:32
Комментарии (0)

Поведение не меняется на рабочем столе. Но на планшетах и мобильных телефонах, я разверните шапку, чтобы покрыть большие изображения логотипа. Примечание: использовать маржа (сверху и снизу) столько, сколько вам нужно для вашего роста логотипом.

В моем случае, 60px сверху и снизу прекрасно работал! 

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

Проверяем шапку здесь.

loxsat
Редактировал ответ 12-го января 2019 в 10:28
Комментарии (0)

В настоящее время наиболее распространенным является, чтобы увидеть Retina-экранами устройств, другими словами: устройствах с высоким разрешением и высокой плотностью пикселей (но обычно меньше, чем 6 дюймов физический размер). Что's, почему вы должны дисплеем Retina специализированных медиа-запросы в CSS. Это наиболее полный пример, который я могу найти:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

Источник: CSS сайт-трюки

Комментарии (0)

Одна дополнительная функция, вы можете также использовать медиа-запросы в Мультимедиа атрибут в `<ссылка> тег.

При этом, браузер будет загружать все ресурсы CSS, независимо от мультимедиа атрибут. Разница в том, что если медиа-запросов СМИ атрибут оценивается в ложные то, что .CSS-файл и его содержимое не будет переадресаций.

Поэтому, рекомендуется использовать медиа атрибут в в `<ссылка> тег, так как он обеспечивает лучший пользовательский опыт.

Здесь вы можете прочитать статью в Гугле про эту проблему https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Некоторые инструменты, которые помогут вам автоматизировать разделение CSS код в разные файлы в соответствии с вашим медиа-querys

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

Что PostCSS https://www.npmjs.com/package/postcss-extract-media-query

Комментарии (0)
  • Дополнительные небольшие устройства ~ телефоны (< 768px по)
  • Небольшие устройства ~ таблетки (>= 768px по)
  • Средний устройствах ~ настольных компьютеров (>= 992px)
  • Большие устройствах ~ настольных компьютеров (>= 1200px)
loxsat
Редактировал ответ 12-го января 2019 в 10:30
Комментарии (0)

Я использую следующие действия, чтобы сделать свою работу.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Комментарии (0)
 
@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }

    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }
Shailesh
Редактировал ответ 14-го сентября 2018 в 12:03
Комментарии (0)