Как поступить в ситуации, когда настройка rem`ов не подходит к каким-то элементам на сайте?

Question

[vigaset12]

Есть настройка rem`ов:

@media(max-width: 991px){
    html{
        font-size: 10px;
    }
}

@media(max-width: 815px){
    html{
        font-size: 8px;
    }
}

@media(max-width: 555px){
    html{
        font-size: 6px;
    }
}

@media(max-width: 355px){
    html{
        font-size: 4px;
    }
}

Ко всем элементам на сайте эта настройка подходит, ну для шапки не подходит - ее элементы становятся очень маленькими на телефонах. Повысить font-size в настройке rem`ов, я не могу - сломаются все другие элементы. Написать элементам шапки побольше rem, не могу - будут слишком крупные элементы на каких-то устройствах. Как решают такие проблемы? Посоветуйте пожалуйста.

Comments

[Smirator]

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

[vigaset12]

Smirator, Я использую на сайте только rem`ы. Они напрямую зависят от этого кода:

@media(max-width: 991px){
    html{
        font-size: 10px;
    }
}

@media(max-width: 815px){
    html{
        font-size: 8px;
    }
}

@media(max-width: 555px){
    html{
        font-size: 6px;
    }
}

@media(max-width: 355px){
    html{
        font-size: 4px;
    }
}

Каким-то элементам подходит такая настройка, каким-то нет.

[Smirator]

vigaset12, А, понял. Ну тогда только первый вариант, который я написал. В данном случае, если все повязано на rem, то будет сложнее

[vigaset12]

Smirator, Через специфичность?

[Антон Литвиненко]

что мешает там где не подходят ремы использовать не ремы? я в работе сайт полностью на ремах один раз всего делал.
как мысль еще завести переменную-коэфициент и прикрепить к вашим ремам через функцию calc c умножением или делением или что вам там нужно

[vigaset12]

Антон Литвиненко, А на чем вы делали?

[Антон Литвиненко]

vigaset12, я почти всегда использую пиксели и проценты, в зависимости от ситуации

[vigaset12]

Антон Литвиненко, А font-size в процентах тоже можно указывать?

[Антон Литвиненко]

vigaset12, проще у меня спросить чем у гугла? Мне не сложно
https://developer.mozilla.org/ru/docs/Web/CSS/font-size
но когда я говорил что использую проценты я не имел в виду что для шрифтов. для шрифтов я использую пиксели, реже ремы. А для задания размеров элементам и отступов почти никогда не использую ремы

[vigaset12]

Антон Литвиненко, Вы потом в медиа-запросах меняете пиксели font-size`а? Я так делаю. Хочу узнать правильно ли это?

[Антон Литвиненко]

vigaset12, почему нет? медиазапросы для этого и придумали

Answer 1

[Александр Талалаев]

Ответ немного не в тему, но подобная практика что вы приводите относительно плохая. Одно из ключевых удобств и причин использование rem — это уважение настроек браузера пользователя. Те мы насильно не переписываем их значения. Зная базовый стандартный размер шрифта в 16px, мы можем примерно понимать, как всё будет устроено. При этом если человек у себя изменил шрифт в настройках, то сайт будет выглядеть почти идеально.
А в вашем случае, выходит костыльный путь, который даёт ощущение меньшего кода. Так не делают.
Я уж молчу о том, что сами элементы почти всегда масштабируются не пропорционально на разных устройствах ключевых.
Ну и подход нужно с mobile-first начинать, а потом, если нужно, корректировать, те условно будет

//код общий и для мобилок
.elem {
//...
}
//код для устройств 768++
@media (min-width: 768px) {
// ... 
}
//код для устройств 768++
@media (min-width: 768px) {
// ... 
}
//код для устройств 1024++
@media (min-width: 1024px) {
// ... 
}
//и тп

Тогда код остается контролируемым, гибким. простым и ясным. Понятно, что и где как себя ведёт.
А с вашим подходом, будет слишком много крайних случаев, когда нужно будет делать исключения, писать доп правила нарушающие логику, просто чтобы заработало и тп.
Теперь сам ответ на ваш вопрос, вам тогда нужно в каждое значение ваших media queries, помимо html, добавлять и элемент для которого будут свои, исключительные значения, ну условно

@media(max-width: 991px){
    html{
        font-size: 10px;
    }
   .shapka-element {
        font-size: 12px;
    }
}

Comments

[vigaset12]

Александр Талалаев, Здравствуйте. В идеале нужно задавать шрифты, паддинги, маржины и прочее в пикселях, чтобы все гибко было? Я сегодня шапку адаптировал с помощью rem и em, выглядит идеально везде, мне стоит поменять все на пиксели?

[Александр Талалаев]

vigaset12, нет. Сегодня принято писать в rem исходя от базового значение шрифта по умолчанию 16px. В пикселях только тени, ширина границ, фильтры(blur).
А так. начиная проект:

1. определяете точки срабатывания media queries(снизу вверх), лучше подсмотреть у лидеров эти ключи, бутстрап или tailwind
   
2. верстайте мобильную версию.
   
3. Делайте нужные модификации для нужного разрешения от меньшего к большему. Конечно же не все ключи разрешения нужны в каждом проекте, поэтому не обязательно их всех заполнять/использовать
   
4. Профит
   

[vigaset12]

Александр Талалаев, А почему лучше именно с мобильном версии начинать верстать?

[Александр Талалаев]

vigaset12, тут история относительно "старая" уже. основные споры были 2012 - 2014 годах.
Если кратко:
- рост популярности и мощности мобилок, они заметный, либо даже основной клиент
- рост производительности, css будет применяться не десктоп версия, а затем дангрейды для омбильных, а в начале общие свойства + мобильные, а потом модификации усложнения десктоп версии.
- зачастую меньше кода, если есть сверху вниз, либо указывать min max, будет слишком много повторения кода. А так, делая отсечения по min-width у вас всегда будет возможность добавить необходимые изменения для большего ширины. понятно что возможно исключения, но это исключения. В целом правила работает.
- ну и проще и понятнее сам код, ты видишь в одном месте основной код css, а далее модификаторы для брейкпоинтов. Удобно всё даже в голове выстраивается
- снова таки, конечно такой подход удобен где адаптивная вёрстка. Если вы строете сложную ERM//CRM, то у вас скорее всего будут отдельные версии мобильная и десктоп, слишком сложная будет адаптация. И там мобайл фёрст подход будет лишним, если основное устройство это компьютер.
В целом можете погуглить про этот вопрос, статей на этот счёт много.
Так же изучить подход например того же Tailwind, как они через модификаторы сделали суперлегкую адаптивность, что зачастую даже css почти не нужно писать (не факт что всегда этот подход лучший. но нередко удобно чтобы быстро что-то собрать). Либо же более классический Bootstrap, но у них тоже подход mobile first.
Так что если кратко: оптимизация кода, оптимизация производительности, более мягкая и понятная адаптивность сайта.
Отдельно отмечу что и верстать и рисовать(макет) нужно в этом случае тоже начиная с мобильной версии. Таким образом будет меньше логических ошибок, ну и значительно быстрее работа пойдёт.