Какие медиа-запросы в CSS использовать для адаптации под планшеты?

Question

[Антон Р.]

В общем суть - сайт хорошо адаптирован под десктоп и мобилки, осталось сделать под планшеты, какие лучше медиа-запросы использовать?
Мне пока приходит на ум: min-widht: 768px and max-widht: 1200px.

Comments

[Ankhena]

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

А ещё, можно весь сайт сделать в vw и clamp, тогда вообще можно обойтись без media.
Так что ваш вопрос без конкретики не имеет смысла.

[Антон Р.]

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

[Ankhena]

Антон Р., очень хорошо.
Смотрите на какой ширине становится плохо и пишите.

Answer 1

[Михаил Р.]

Мой набор:

breakpoints: {
  xs: '412px',
  sm: '576px',
  md: '768px',
  lg: '960px',
  xl: '1366px',
  '2xl': '1920px',
},

Answer 2

[Vladimir Medvedev]

Зависит от задачи, по мимо разрешения экрана, а это уже точно 1240 (за счет айпадов) и до примерно 765.
Так же стоит определять тач скрин если от этого

@media (hover: none) {
  /* Стили для устройств с тачскрином */
}

а по поводу размеров

@media (min-width: 765px) and (max-width: 1240px) {
  /* Стили для планшетов */
}