При верстке под мобильный телефон в margin, padding и font-size использовать px или em?

Question

[Игорь Самохин]

Здравствуйте,

Раньше не сталкивался на практике с версткой под телефоны. При верстке под мобильный телефон в margin, padding и font-size использовать px или em? И какие преимущества/недостатки у этих способов?

Comments

[Сергей Семенко]

По-моему все используют пиксели )

Answer 1

[dm]

Если задача сверстать сайт для конкретного разрешения и только для него, то пиксели подходят вполне. Но если вы хотите, чтобы сайт выглядел хорошо на разных разрешениях, тогда em и проценты.

Comments

[Игорь Самохин]

нужно под разрешения современных мобильных телефонов..

[dm]

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

[Игорь Самохин]

Дмитрий Кострубяк: извиняюсь за настойчивость, но как это будет выглядеть в %?

body{
font-size:100% // а сколько это в пикселях будет?
}
button{
font-size:80%; // это значение от какого рассчитывается?
padding:10% 20%; // а это значение от какого рассчитывается?
}

[dm]

По умолчанию в браузерах 1em = 16px
То есть в body задаете либо font-size: 100% либо font-size: 1em
А остальные размеры шрифтов уже расчитываете по формуле и указываете всem: target ÷ context = result
Например, 24 пиксела с PSD-макета переводятся в em так: 24 / 16 = 1.5 em

Паддинги расчитывают от блока, для которого они указываются. Все дело в контексте.

Прочитайте отличную не объемную книгу и всё сразу будет ясно, вопросы отпадут:
Итан Маркотт - Отзывчивый веб-дизайн - 2012
rutracker.org/forum/viewtopic.php?t=4218948

[dm]

Наверное неправильно выразился. По умолчанию не 1em = 16px, а вооббще в брузере 16px по умолчанию.

[Игорь Самохин]

Дмитрий Кострубяк: 16px = 100% у body это всегда? В любом браузере?

[dm]

Игорь Самохин: Как везде пишут: "в дольшинстве современных браузеров". То есть наверное есть какие-то исключения

[Игорь Самохин]

Дмитрий Кострубяк: а верстаю я в px или % может влиять на то, что мобильные браузеры не понимают ? Можете подсказать куда рыть тут: mobile.amwaywoman.webtm.ru ?

[Игорь Самохин]

извиняюсь, не понимают meta name viewport width=device-width

[dm]

Игорь Самохин:
1. Нет закрывающего div в блоке id="mainContainer"

2. #mainContainer{
width:25em;
}
Насколько понял mainContainer это блок, в кот. расположен весь контент. Попробуйте ширину в процентах поставить.

[dm]

Игорь Самохин: meta name viewport width=device-width работает, но если где-то стоит фиксированная ширина, то она может всё портить

[Игорь Самохин]

Дмитрий Кострубяк: спасибо большое добрый человек, буду пробовать!

[dm]

Игорь Самохин: Еще попробуйте убрать overflow: hidden у mainContainer
Похоже, что это из-за него картинка обрезается. И в других местах тоже можно без этого свойста попробовать.

[Игорь Самохин]

Дмитрий Кострубяк: да уж что только не пробовал. И по 100% у html, body и mainContainer.. Может я не понимаю чего ожидать? Я ожидаю что сайт на мобильном загрузится сразу как-бы отдаленный, то есть без зума и без белых краев по бокам, которые в браузере есть

[dm]

Игорь Самохин: Вообще задача вроде как не сложная. Давай помогу, если хочешь. Отправишь в почту код и изображения, завтра отправлю назад.

[dm]

Игорь Самохин: Почта: [e-mail] Сейчас уже ухожу от компа, если отправишь, то завтра сделаю.

[Игорь Самохин]

Дмитрий Кострубяк: отправил, спасибо!

Answer 2

[SerzN1]

не то и не другое

1. использовать REM для масштабируемых стилей
таким образом вы получаете изменение масштаба сайта 1 строчкой
html { font-size:125%;}

2. использовать % для резиновых стилей
получаем резину по ширине и прочее подобное

3. использовать em для стилей жестко зависящих от размера шрифта
(например вертикальное позиционирование тире перед списком и тп.)
получаем гибкость независимо от размера шрифта

да . в целом получается много и можно запутаться - но в некоторых момента оно того стоит
главное чтобы работало :)