Как использовать CSS Media Queries на экране Retina - PullRequest
Новая
       42

Как использовать CSS Media Queries на экране Retina

0 голосов
/ 12 мая 2019

Я написал следующий медиа-запрос, который не работает должным образом. Изменение происходит на 1537px, а не на 1024px. Я использую экран Retina, и этот код содержится в файле SCSS в проекте, загруженном с помощью create-реагировать-приложение 3.

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

Мой CSS: 

&--info-container {

  border: 5px solid red;

  @media (max-width: 1024px) {
    border: 5px solid green; 
  }

}

В моем index.html: 

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Большое спасибо !!

Ответы [ 2 ]

0 голосов
/ 13 мая 2019

Оказывается, мой браузер был увеличен на 150%.Не думал проверить это !!Уменьшение до 100% исправило эту проблему для меня.

0 голосов
/ 12 мая 2019

Вы пытаетесь настроить таргетинг на iPad? Пиксели устройства и CSS-пиксели различаются.

Вот две статьи, которые объясняют это более подробно: https://medium.com/@flik185/understanding-device-resolution-for-web-design-and-development-3bb4a5183478 https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Вот краткий справочник, который может оказаться полезным: http://iosres.com/

...