Блог

Главная - Вопросы по программированию - Rem не изменяет размеры элементов, когда экран становится меньше

Rem не изменяет размеры элементов, когда экран становится меньше

#css

Вопрос:

У меня проблема, когда rem не получает ни одного из моих элементов, когда я изменяю размер экрана, например, у меня есть отступ в теле, равный 3rem, а размер шрифта в html-элементе составляет 62,5%, но когда я изменяю размер экрана, отступ в теле остается на уровне 3rem или 30 пикселей

 *,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777;
  padding: 3rem;
  box-sizing: border-box;
}

Я также включил мета-тег видового экрана

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

Ответ №1:

Таким образом, как у вас есть, rems изменится только в том случае, если вы измените размер шрифта.

Если вы хотите настроить rems в зависимости от размера экрана, вам нужно использовать медиа-запросы и изменить там размер корневого шрифта, например:

 html {
  font-size: 62.5%
  @media only screen and (max-width: 900px) {
    font-size: 56.25%;
  }
}

Ответ №2:

 html {
  font-size: 62.5%;
}

будет в нормальных обстоятельствах гарантировать, что базовый размер em составляет 10 пикселей. Это связано с тем, что браузеры по умолчанию будут использовать размер шрифта 16 пикселей, а 62,5% дают вам 10 пикселей, что облегчает понимание того, что, например, 3em на самом деле (30 пикселей).

Если вы хотите, чтобы размер шрифта постоянно уменьшался (или увеличивался) при уменьшении (или увеличении) ширины окна просмотра, вы можете установить размер шрифта пропорциональным ширине окна просмотра. Например:

 html {
 /* font-size: 62.5%; */
 font-size: 1vw;
}

Однако есть несколько предостережений. Некоторые браузеры (я полагаю, что Chrome делает это) не позволяют размеру шрифта становиться слишком маленьким. Что еще более важно, пользователь может установить размер em по умолчанию, чтобы он был больше, чтобы он видел увеличенный текст, и установка размера шрифта в абсолютных единицах, а не в процентах, переопределит это.

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

Метки: ,