Мне нужна помощь с одной проблемой. Размеры шрифтов различаются в разных компонентах моего портфолио, которое я разработал с использованием Next.js 14 App Router. Я использую модульные CSS.
У меня есть один CSS-модуль под названием default.module.css, который содержит все стили шрифтов и точки разбиения.
Пожалуйста, посмотрите и дайте мне советы по исправлению этой проблемы. Не стесняйтесь спрашивать, если вам нужны дополнительные детали.
default.module.css:
.defaultBg {
background-color: var(--dark);
width: 100%;
height: 100%;
min-height: 100dvh;
}
.containerSpace {
width: 80.5%;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 600px) {
.containerSpace {
width: calc(100% - 2.75rem);
}
}
@media screen and (min-width: 601px) and (max-width: 1000px) {
.containerSpace {
width: calc(100% - 12rem);
}
}
@media screen and (min-width: 1001px) and (max-width: 1400px) {
.containerSpace {
width: 79.5%;
}
}
.headingSpace {
margin: auto auto 1.45vw auto;
}
.textSpaceSmall {
margin: auto auto 0.75vw auto;
}
.textSpace {
margin: auto auto 1.25vw auto;
}
.textSpaceLarge {
margin: auto auto 1.25vw auto;
}
@media screen and (max-width: 1000px) {
.headingSpace {
margin-bottom: 1rem;
}
.textSpaceSmall {
margin-bottom: 0.75rem;
}
.textSpace {
margin-bottom: 1rem;
}
.textSpaceLarge {
margin-bottom: 1rem;
}
}
.headingStandard {
font-size: 1.25vw;
font-weight: 600;
}
@media screen and (max-width: 400px) {
.headingStandard {
font-size: 16px;
}
}
@media screen and (min-width: 401px) and (max-width: 1000px) {
.headingStandard {
font-size: 17px;
}
}
.headingMedium {
font-size: 1vw;
font-weight: 600;
color: var(--white);
}
u/media screen and (max-width: 1000px) {
.headingMedium {
font-size: 16px;
}
}
.textLarge {
line-height: 1.75vw;
color: var(--white);
font-weight: 500;
}
.textExtraLarge,
.text2XL {
font-weight: 500;
color: var(--white);
line-height: 2vw;
}
.textNormal {
line-height: 1.85vw;
}
.textExtraLarge {
font-size: 1.2vw;
}
@media screen and (max-width: 1000px) {
.textNormal {
line-height: 24px;
}
.textLarge,
.textExtraLarge,
.text2XL {
line-height: 26px;
}
.textExtraLarge {
font-size: 15px;
}
}
.text2XL {
font-size: 1.3vw;
}
@media screen and (max-width: 1000px) {
.text2XL {
font-size: 16px;
}
}
.textLarge {
font-size: 1vw;
}
@media screen and (max-width: 400px) {
.textLarge {
font-size: 14px;
}
}
@media screen and (min-width: 376px) and (max-width: 1000px) {
.textLarge {
font-size: 15px;
}
}
.textSmall {
font-size: 0.8vw;
font-weight: 500;
color: var(--white);
}
@media screen and (max-width: 1000px) {
.textSmall {
font-size: 16px;
}
}
@media screen and (min-width: 1001px) and (max-width: 1100px) {
.textSmall {
font-size: calc(0.75vw + 0.2vw);
}
}
@media screen and (min-width: 1101px) and (max-width: 1200px) {
.textSmall {
font-size: calc(0.75vw + 0.125vw);
}
}
@media screen and (min-width: 1201px) and (max-width: 1300px) {
.textSmall {
font-size: calc(0.75vw + 0.1vw);
}
}
.textExtraSmall {
font-size: small;
font-weight: 500;
color: var(--white);
}
.textNormal {
font-size: 1vw;
font-weight: 500;
color: var(--white);
}
@media screen and (max-width: 1000px) {
.textNormal {
font-size: 14px;
}
}
.textPrimary {
color: var(--primary);
}
.textWhite {
color: var(--white);
}
.textCenter {
text-align: center;
}
.fstItalic {
font-style: italic;
}
.textGlow {
text-shadow: 0 0 2px var(--white);
}
.textGlowPrimary {
text-shadow: 0 0 1.5px var(--primary);
}
.letterSpacingDefault {
letter-spacing: 0.1vw;
}
@media screen and (max-width: 1000px) {
.letterSpacingDefault {
letter-spacing: 1px;
}
}
.relative {
position: relative;
}
.textRevealInitial {
opacity: 0;
filter: blur(6px);
transition: opacity 650ms linear, filter 650ms linear;
}
.textRevealAnimation {
opacity: 1;
filter: blur(0px);
}
.defaultButtonHover {
transition: 0.1s linear;
}
.defaultButtonHover:hover {
background-color: var(--button-bg-white-hover);
}
Я проверил с помощью инструментов разработчика Chrome на рабочем столе, там все работает хорошо. Но это просто ломается, когда я переключаюсь на режим настольного сайта в браузере Android. Это проблема с CSS или проблема Next.js?
Ответ
Проблема с неравномерными размерами шрифтов в приложении на Next.js 14 может возникать по нескольким причинам, особенно если вы используете CSS-модули и различные медиа-запросы. Давайте разберем, как можно решить эту проблему.
Шаги для решения проблемы с размерами шрифтов:
-
Проверка медиа-запросов:
Убедитесь, что ваши медиа-запросы правильно настроены. У вас много различных медиа-запросов, видео которых вы используете, чтобы установить размеры шрифтов. Они могут конфликтовать друг с другом при разных размерах экрана.Например, проверьте, все ли размеры шрифтов адаптированы для разных размеров экрана. Также убедитесь, что промежутки между медиа-запросами корректны. Возможно, вам стоит добавить больше точек останова, чтобы обеспечить плавный переход.
-
Использование переменных CSS:
Рассмотрите возможность использования CSS-переменных для задания размеров шрифтов. Это упростит управление значениями и поможет избежать конфликтов. Например::root { --font-size-small: 14px; --font-size-medium: 16px; --font-size-large: 1vw; } .textNormal { font-size: var(--font-size-medium); } @media screen and (max-width: 1000px) { .textNormal { font-size: var(--font-size-small); } } -
Проверка единиц измерения:
Использование единиц измерения относительных размеров, таких какvw(viewport width), может быть не всегда оптимально для текста, так как оно зависит от ширины окна. Это может вызывать проблемы на мобильных устройствах. Рассмотрите возможность использования фиксированных значений (например,pxилиem) для ключевых элементов текста. -
Тестирование на разных устройствах:
Часто проблемы проявляются только на определенных устройствах или в определенных браузерах. Обязательно тестируйте сайт на реальных устройствах, а не только в режиме разработчика. Попробуйте использовать эмуляторы или реальные мобильные устройства, чтобы понять, как будут выглядеть ваши шрифты. -
Проверка кросс-браузерной совместимости:
Убедитесь, что шрифты поддерживаются всеми браузерами, которые вы хотите поддерживать. Некоторые браузеры могут по-разному интерпретировать CSS-правила. Проверьте наличие особых стилей или проблем в вашем коде, которые могут вызвать неправильное отображение шрифтов. - Настройка шрифтов:
Убедитесь, что вы корректно загружаете шрифты, которые используете. Если вы используете сторонние шрифты (например, Google Fonts) или собственные шрифты, убедитесь, что они правильно подключены.
Пример исправленного кода:
@media screen and (max-width: 1000px) {
.headingStandard {
font-size: 16px; /* Вместо использования vw */
}
}Заключение:
Если, несмотря на все изменения, проблема все еще сохраняется, попробуйте создать минимальную версию вашего проекта с проблемой и протестируйте только основные компоненты. Это может помочь снивелировать возможные причины проблемы, сосредоточив внимание только на CSS, который влияет на размеры шрифтов.
Если вам потребуются дополнительные разъяснения или помощь, не стесняйтесь писать!