При верстке под мобильный телефон в margin, padding и font-size использовать px или em?
Здравствуйте,
Раньше не сталкивался на практике с версткой под телефоны. При верстке под мобильный телефон в margin, padding и font-size использовать px или em? И какие преимущества/недостатки у этих способов?
Если задача сверстать сайт для конкретного разрешения и только для него, то пиксели подходят вполне. Но если вы хотите, чтобы сайт выглядел хорошо на разных разрешениях, тогда em и проценты.
Чтобы все было красиво, сначала делается резиновая верстка, а потом с помощью медиа запросов адаптируется для разных разрешений.
Пиксели в этой схеме лишние. Можно и с ними, конечно, сделать, но с адаптацией будет больше работы. В общем все как и для десктопов.
Если боковые отступы, например, сделать фиксированными, то они по-разному выглядеть будут и придется корректировать для разных разрешений, а в процентах все будет одинаково без дополнительных усилий.
Дмитрий Кострубяк: извиняюсь за настойчивость, но как это будет выглядеть в %?
body{
font-size:100% // а сколько это в пикселях будет?
}
button{
font-size:80%; // это значение от какого рассчитывается?
padding:10% 20%; // а это значение от какого рассчитывается?
}
По умолчанию в браузерах 1em = 16px
То есть в body задаете либо font-size: 100% либо font-size: 1em
А остальные размеры шрифтов уже расчитываете по формуле и указываете всem: target ÷ context = result
Например, 24 пиксела с PSD-макета переводятся в em так: 24 / 16 = 1.5 em
Паддинги расчитывают от блока, для которого они указываются. Все дело в контексте.
Игорь Самохин: Еще попробуйте убрать overflow: hidden у mainContainer
Похоже, что это из-за него картинка обрезается. И в других местах тоже можно без этого свойста попробовать.
Дмитрий Кострубяк: да уж что только не пробовал. И по 100% у html, body и mainContainer.. Может я не понимаю чего ожидать? Я ожидаю что сайт на мобильном загрузится сразу как-бы отдаленный, то есть без зума и без белых краев по бокам, которые в браузере есть
1. использовать REM для масштабируемых стилей
таким образом вы получаете изменение масштаба сайта 1 строчкой
html { font-size:125%;}
2. использовать % для резиновых стилей
получаем резину по ширине и прочее подобное
3. использовать em для стилей жестко зависящих от размера шрифта
(например вертикальное позиционирование тире перед списком и тп.)
получаем гибкость независимо от размера шрифта
да . в целом получается много и можно запутаться - но в некоторых момента оно того стоит
главное чтобы работало :)
