Если размер шрифта тела в процентах, то хорошо ли использовать em для всех вещей, в некоторых местах следует использовать ширину шрифта, отступы или%? - PullRequest
Новая
       0

Если размер шрифта тела в процентах, то хорошо ли использовать em для всех вещей, в некоторых местах следует использовать ширину шрифта, отступы или%?

7 голосов
/ 01 января 2012

Я делаю Fluid + адаптивный макет, где макет масштабируется вверх и вниз при изменении размера браузера / экрана.

Если я использую font-size из body в % процентах, то будет ли целесообразным использовать em для всех вещей,

  • font-size
  • width
  • margin
  • padding
  • border-width
  • border-radius

Или я должен использовать em только для font-size?

Моя цель состоит в том, чтобы все было пропорционально, когда все увеличивается и уменьшается.

I 'Я немного сбит с толку, когда я должен использовать em и когда %.Мой font-size тела 62.5%

Ответы [ 2 ]

2 голосов
/ 01 января 2012

Использование em считалось хорошей практикой для обеспечения доступности, прежде чем каждый браузер поддерживал масштабирование. Теперь я обнаружил, что это в основном полезно для простого объявления относительных размеров шрифта в определенных сценариях (возможно, в вашем).

Я обнаружил, что относительный размер не дает эстетически приятные результаты на границах, потому что некоторые браузеры будут пытаться буквально использовать значение с плавающей запятой, полученное из em или процентного вычисления, и результат будет нечеткий (попробуйте).

Я использую проценты в большинстве своих макетов. Я обнаружил, что пара общих стилей, основанных на процентах, может удовлетворить множество потребностей макета (например, стиль для разделения 50/50, 33/67, 25/75 и т. Д. И т. Д.).

Лично я считаю, что проценты более интуитивно понятны. Элемент с шириной 100% всегда будет занимать 100% своего родителя (с правильным размером блока, конечно), и это легко прочитать в вашем коде. Элемент шириной 15em может занимать 50% или 150% своего родителя; это не совсем очевидно, и мне все труднее отслеживать (но, может быть, это только я).

Вот несколько базовых стилей. Они не были протестированы на всех возможных браузерах / устройствах, но они используются в производственных приложениях: 

* {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

BODY {
    font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif;
    color: #404040;
    background-color: #fff;
}

H1 {
    font-size: 1.8em;
    margin: .1em 0 .1em 0;
    color: #2B265B;
}

H2 {
    font-size: 1.6em;
    margin: 0 0 .25em 0;
    color: #303030;
}

H3 {
    font-size: 1.4em;
    margin: 0 0 .25em 0;
    color: #3b5998;
}

H4 {
    font-size: 1.2em;
    margin: 0 0 .1em 0;
    color: #666;
}

P {
    margin: 0 0 1.5em 0;
    font-size: 1.1em;
}

INPUT, SELECT, TEXTAREA {
    border-style: solid;
    vertical-align: middle;
    margin: .2em 0 .2em 0;
    border-radius: .3em;
    -moz-border-radius: .3em;
}

INPUT[type="text"], INPUT[type="password"]{
    border-color: #85a3bf;
    width: 16em;
    padding: .2em;
    border-width: 1px;
}

INPUT[type="file"] {
    border-color: #85a3bf;
    width: 32em;
    padding: .2em;
    border-width: 1px;
}

INPUT[type="text"]:focus, INPUT[type="password"]:focus, TEXTAREA:focus {
    border-color: #0066cc;
}

INPUT[type="submit"], INPUT[type="button"] {
    border-color: #DDDDDD #BBBBBB #999999;
    border-width: 1px;
    background: #eee url([URL]) repeat-x;
    padding: .2em .8em .2em .8em;
    text-shadow: 1px 1px #fff;
}

INPUT[type="submit"]:hover, INPUT[type="button"]:hover {
    background: #eee url([URL]) repeat-x;
}

INPUT[type="submit"]:active, INPUT[type="button"]:active {
    background: #eee url([URL]) repeat-x;
}

INPUT[type="checkbox"], INPUT[type="radio"] {
    margin: 0px .5em .1em .5em;
    vertical-align: middle;
}

INPUT[type="image"] {
    border: 0;
    margin: 0;
}

SELECT {
    padding: .1em;
    border-width: 1px;
    border-color: #DDDDDD #BBBBBB #999999;
    background: #eee url([URL]) repeat-x;
}

TEXTAREA {
    border-width: 1px;
    border-color: #85a3bf;
    padding: .3em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
1 голос
/ 01 января 2012

для своих проектов я делаю это так:

  • Размер шрифта браузера по умолчанию: 16px
  • настройка html { font-size:100.01%;}. 0,01% уменьшает ошибки округления. общее «округление» для решения случая, когда изменение размера делает текст очень маленьким время от времени
  • с помощью этого инструмента: http://pxtoem.com/ вы можете легко конвертировать px в ems без заминки.
  • , поэтому, если я установлю body {font-size: 75%;}, размер шрифта будет 12px, поскольку 75% из 16 равно 12.

px лучше всего использовать для общего макета страницы, например, разделов страниц, полей, отступов. проблема с px заключается в том, что, особенно в браузере, таком как IE6, который имеет масштабирование текста «наименьший, меньший, нормальный, большой и больший», единичные шрифты px не меняются. однако в случае полного масштабирования страницы нам не нужно это масштабирование текста. масштаб страницы, содержание и текст в отличие от старых дней.

ems лучше всего использовать для отступов и полей текста, а также для размера шрифта текста. в случае масштабирования текста IE, ems DO изменяет размер в ответ на это.

процент? я не использую их или редко в некоторых случаях.

...