Медиа-запросы и Адаптиция Flashcards
Что нужно отключить перед тем, как проверять медиа-запросы?
Отключить всю плавную анимацию, как минимум transition. НЕ ЗАБЫТЬ ПОТОМ ВКЛЮЧИТЬ!
Как лучше задавать марджины в навбаре?
В процентах, em или rem, так потом будет меньше медиа-запросов
Какой должен быть порядок медиа-запросов?
От большего к меньшему, после CSS
Что может появиться у некоторых блоков при неудачных (со скроллом) медиа-запросах?
Может появиться граница цветом, как у body. Пройдёт с исчезновением скролла.
В каких единицах лучше задавать ширины родителей, детей, марджинов,б паддингов? Почему это может не сработать?
В процентах. Если марджины в уонсоли показываются при этом тоже в%, использовать em или rem. А если не работает, просто уменьшить немного ширины, марджины или паддинги и всё заработает!
Шрифты em/rem. Когда применять?
- Когда ширина текста становится меньше 60-ти символов на строку и нельзя расширить блок с текстом (по заданию или уже не вмещается)
- Когда заголовок должен всегда оставаться без переноса строк или смещения
- Если на главной пару строк и кнопка- но не для маленьких, а для больших экранов. (От 1100-1200пкс)
Тоже самое касается простого текста. Но понадобиться ещё пару медиа-запросов, если эти объекты становяться слишком большими - Анимированные кнопки (смотреть по дизайну, мб и не надо)
Шрифты em/rem. Когда НЕ стоит применять?
- Если на главной пару строк и кнопка-не применять, переносы строк смотрятся лучше. Иначе “главная” будет почти пустая на мобильном
- Пока текст можно переносить по строкам, ширина строки не меньше 60-ти символов и ещё можно увеличить ширину/уменьшить отступы
Эластичность картинок. Как придать, причём кроссбраузерно?
width: 100%;
height: auto;
max-width: 300px; /фактическая ширина изображения/
Разница между em и rem
Коэффициент: em - относительно родителя, rem (root em)- относительно корня(html)
