Сброс размера шрифта CSS?
В моем коде я использую css, который устанавливает для свойства HTML font-size разные проценты в зависимости от ширины экрана, поэтому любые значения rem изменяются соответствующим образом, но теперь все мои размеры шрифта испорчены. Я пробовал использовать сброс CSS и настройку body font-size, но это кажется, не работает.
Вот фрагмент:
@media only screen and (max-width:75em) {
html {
font-size: 59%
}
}
@media only screen and (max-width:56.25em) {
html {
font-size: 56%
}
}
@media only screen and (min-width:112.5em) {
html {
font-size: 65%
}
}
body {
box-sizing: border-box;
position: relative;
line-height: 1.5;
font-family: sans-serif;
font-family: 'Source Sans Pro', sans-serif;
padding-top: 3.8rem;
width: 100vw;
font-size: 100%;
}
Обратите внимание, что это стройный компонент, импортированный с использованием тега слота.
нет, я хочу, чтобы это было 100%, например. браузер по умолчанию.
Ответы 2
@media only screen and (max-width:75em) {
html {
font-size: 59% !important;
}
}
@media only screen and (max-width:56.25em) {
html {
font-size: 56% !important;
}
}
@media only screen and (min-width:112.5em) {
html {
font-size: 65% !important;
}
}
body {
box-sizing: border-box;
position: relative;
line-height: 1.5;
font-family: sans-serif;
font-family: 'Source Sans Pro', sans-serif;
padding-top: 3.8rem;
width: 100vw;
font-size: 100%;
}
Я попробовал ваш код в браузере Google Chrome и увидел, что он работает корректно https://codepen.io/agokselb/pen/JjVORBE . Не могли бы вы попробовать приведенный выше код? Возможно, браузер, классы не перезаписывают или не поддерживают модуль em.
Хотя технически это работает, !important следует использовать разумно, см. ответы на: stackoverflow.com/questions/3706819/…
Вы правы, но мне просто интересно узнать причину ошибки.
Это не работает, когда я изменяю размер окна, размер текста меняется. Я не хочу, чтобы менялись только значения rem.
Не уверен, почему вы хотите использовать тег html для глобального изменения размера шрифта. Почему бы вместо этого не использовать размеры шрифтов на основе компонентов? Также я бы посоветовал вам изменить размер шрифта внутри тела, а не внутри html.
Одной из причин может быть то, что вы не устанавливаете значение по умолчанию, к которому можно вернуться.
Я предлагаю вам сделать это:
html {
font-size: 100%; /* Set a default value as fallback */
}
@media only screen and (max-width:75em) {
html {
font-size: 59%; /* <- do not forget the semicolon here */
}
}
@media only screen and (max-width:56.25em) {
html {
font-size: 56%; /* <- do not forget the semicolon here */
}
}
@media only screen and (min-width:112.5em) {
html {
font-size: 65%; /* <- do not forget the semicolon here */
}
}
body {
box-sizing: border-box;
position: relative;
line-height: 1.5;
font-family: sans-serif;
font-family: 'Source Sans Pro', sans-serif;
padding-top: 3.8rem;
width: 100vw;
font-size: 100%; /* This will most likely not work, because you are setting the font-sizes on html, which is higher on hierarchy than body. */
}<html>
<body>
Hello world
</body>
</html>Даже если последняя точка с запятой в CSS не нужна, рекомендуется рассмотреть возможность ее размещения в любом направлении, чтобы предотвратить дальнейшие ошибки и проблемы (что, я предполагаю, также может произойти здесь, поскольку вы используете Svelte).
Это не работает, когда я изменяю размер окна, размер текста меняется. Я не хочу, чтобы менялись только значения rem.
Пожалуйста, уточните ваши требования, чтобы мы могли оказать дополнительную помощь. Я не совсем понимаю, какие rem значения вы хотите изменить, если работаете с % над запросами @media. Если вы хотите динамически изменять значения rem в зависимости от размера окна, вам нужно будет определить переменные CSS для различных размеров текста и изменить их значение с помощью запросов @media вместо непосредственного изменения размера шрифта.
Мне не понятно, какой вы хотите, чтобы размер шрифта в теле был - относительно рем или нет?