Каковы хорошие значения разрешения для использования со средствами массовой информации?

Ответ 1

См. эту статью для шаблона '320 и Up' - Энди Кларк, он используется многими разработчиками и дизайнерами: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

Если вы прокрутите страницу вниз до раздела медиа-запросов, вы увидите, что они используют пять шагов CSS3 Media Query (480, 600, 768, 992 и 1382px). Обычно я придерживаюсь всего 4 (480, 600, 768, 1024).

Чтобы объяснить диапазоны:

min-width: 480px: будет нацелен на мобильные устройства в ландшафтном режиме и вверх

min-width: 600px: нацеливает планшеты в портретном режиме и вверх

min-width: 768px: нацеливает планшеты в альбомном режиме и вверх

min-width: 1024px: Задание вида рабочего стола

И как правило, у меня будет мой мобильный портретный вид CSS в самом начале (отсюда и термин "320 и выше" ).

Ответ 2

Я бы просто хотел добавить к ответу Suvi.

Adaptive Design применяет медиа-запросы к целевым разрешениям, однако с помощью адаптивного дизайна вы можете добавлять точки останова, где бы вы ни находились.

Нет правила относительно того, сколько точек останова должна иметь страница, но нужно добавлять туда, где разворачивается макет. Цель состоит в том, чтобы обеспечить идеальный дизайн и контент, независимо от ширины окна просмотра.

Я думаю, что это сообщение дает хороший обзор:

http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html

Ответ 3

Попробуйте это с дисплеем сетчатки

/* 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 */
}

/* 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 (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Надеюсь, вы в порядке

Ответ 4

Я написал это меньшее решение:

/* screens range */

@screen-s-max:    20em;         /* 320px  */
@screen-min:      20.063em;     /* 321px  */
@screen-max:      40em;         /* 640px  */
@screen-m-min:    40.063em;     /* 641px  */
@screen-m-max:    64em;         /* 1024px  */
@screen-l-min:    64.063em;     /* 1025px  */
@screen-l-max:    90em;         /* 1440px  */
@screen-xl-min:   90.063em;     /* 1441px  */
@screen-xl-max:   120em;        /* 1920px  */
@screen-xxl-min:  120.063em;    /*  1921px  */

/*
 0----- smallmobile -----320-----  mobile  -----640-----  tablet  -----1024-----  notebook  -----1440----- desktop -----1920----- wide
*/

@onlyScreen: ~"only screen";

@smallmobile: ~"(max-width: @{screen-s-max})";
@mobile: ~"(min-width: @{screen-s-max}) and (max-width: @{screen-max})";
@tablet: ~"(min-width: @{screen-m-min}) and (max-width: @{screen-m-max})";
@notebook: ~"(min-width: @{screen-l-min}) and (max-width: @{screen-l-max})";
@desktop: ~"(min-width: @{screen-xl-min}) and (max-width: @{screen-xl-max})";
@wide: ~"(min-width: @{screen-xxl-min})";

@portrait: ~"(orientation:portrait)";
@landscape: ~"(orientation:landscape)";

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";


@mobile-and-more: ~"(min-width: @{screen-min})";
@tablet-and-more: ~"(min-width: @{screen-m-min})";
@notebook-and-more: ~"(min-width: @{screen-l-min})";
@desktop-and-more: ~"(min-width: @{screen-xl-min})"; 

/*

syntax example

@media @onlyScreen and @tablet and @portrait , @notebook and @landscape, @mobile and @landscape{
  body{
    opacity: 0.8;
  }
}

*/

Как показано в примере синтаксиса, вы можете объединить все эти меньшие переменные и получить сложный медиа-запрос. Используйте "и" для логического оператора AND и запятой для OR. Вы можете комбинировать различные разрешения экрана, ориентацию устройства (пейзаж/портрет) и сетчатки или нет.

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