Применяйте стили CSS, соответствующие разрешению экрана

Question

Как применить стили для разных разрешений экрана

Например: у меня компьютер с максимальным разрешением экрана 1366 X 768 и я хочу указать стили CSS только для этого разрешения.

Правила Css @media учитывают только минимальную и максимальную ширину браузера. Как настроить таргетинг на конкретное разрешение.

Answer 1

Вы можете попробовать это

@media screen and (min-width: 1500px) and (max-width: 1600px){
    /*Your style */
}

Answer 2

Попробуйте это:

@media screen and (min-width: 1366px) and (max-width: 1366px)
              and (min-height: 768px) and (max-height: 768px) {
    /* style */
}

Answer 3

Используйте width и height медиазапросы

@media (width: 1366px) and (height: 768px) {
   :root { background: yellowgreen; }
}

, чтобы соответствовать области просмотра 1366x768 px

Пример кода ручки

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

Answer 4

Используйте тег разрешения, например:

@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

Дополнительные объяснения и синтаксис здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution