Проблема с медиазапросами: Safari не масштабирует элементы в REM - PullRequest
Новая
       35

Проблема с медиазапросами: Safari не масштабирует элементы в REM

0 голосов
/ 24 августа 2018

Мой макет основан на rem, и недавно я заметил, что Safari (для настольных ПК и мобильных устройств) масштабирует только шрифты, но никаких других элементов.В частности, он масштабирует элементы с помощью первого медиазапроса.

Все отлично работает в Chrome и Firefox.

HTML 

<h1>Hello Circle</h1>
<div class="circle"></div>

CSS 

html,
body {
  font-size: 62.5%;
  background-color: red;
}

@media (max-width: 900px) {
  html,
  body {
    font-size: 50%;
    background-color: green;
  }
}

@media (max-width: 579px) {
  html,
  body {
    font-size: 30%;
    background-color: blue;
  }
}

.circle {
  width: 20rem;
  height: 20rem;
  background-color: yellow;
  border-radius: 50%;
}

h1 {
  font-size: 3rem;
}

Fiddle: http://jsfiddle.net/ew97d4rj (желтый круг должен уменьшаться с каждым MQ - как текст - но в Safari круг не уменьшается в самом маленьком MQ.)

Я думаю, тамчто-то не так с медиазапросами, потому что, если я использую приведенные ниже MQ, это работает, но нарушает мой макет, так как нормальные размеры используются только между 579px и 700px. 

html,
body {
  font-size: 62.5%;
  background-color: red;
}

@media (max-width: 579px) {
  html,
  body {
    font-size: 30%;
    background-color: green;
  }
}

@media (min-width: 700px) {
  html,
  body {
    font-size: 90%;
    background-color: blue;
  }
}

Ответы [ 2 ]

0 голосов
/ 27 августа 2018

Теперь я почти уверен, что это проблема минимального размера шрифта Safari и не имеет ничего общего с медиа-запросами. Если я использую медиазапросы с размером шрифта 200% / 150/100%, он работает "отлично". Когда я ищу решение, я нахожу решение использовать -webkit-text-size-adjust: none, но оно больше не поддерживается. По крайней мере, это не имеет никакого эффекта. Кроме того, я предполагал, что масштаб текста, как предполагалось, был неверным. Он просто масштабирует установленный Safari минимальный размер шрифта.

Я использую Safari 10.1 на моей машине и Safari 11 на моем телефоне.

0 голосов
/ 24 августа 2018

использовать мета в заголовке.<meta name="viewport" content="width=device-width, initial-scale=1">

и затем использовать медиа-запросы css, подобные этому, и размер шрифта применяются только к тегу body, а не к экрану html @media и (max-width: 900px) {

body {
    font-size: 50%;
    background-color: green;
  }

}

...