Использование em в качестве единицы измерения ширины и высоты для эластичного дизайна - PullRequest
Новая
       60

Использование em в качестве единицы измерения ширины и высоты для эластичного дизайна

0 голосов
/ 16 мая 2019

Я пытаюсь понять, можно ли (и как) использовать em измерение для свойств CSS, которые задают width и height элементов для Эластичный Дизайн макета (ширина, высота, минимальная ширина, минимальная высота, максимальная ширина и максимальная высота).Проблема связана с расположением макета главной обертки.Я не понимаю, когда и как вы должны использовать em для определения ширины и высоты при макете (не для определения размера).Например, если я хочу, чтобы ширина основной оболочки составляла 90% элемента body, как я могу добиться этого, используя em вместо%?

Я искал в Stack Overflow похожие вопросы, ноответы включают такие вещи, как адаптивный дизайн, JavaScript и JQuery.Я могу использовать только HTML5 и CSS3.Я также попытался установить ширину и высоту, используя разные значения для em, но затем основная оболочка не остается в центре или превышает размер экрана.

Вот фрагмент кода того, что я пробовал.Полный код доступен на JSFiddle 

<div id="page">
    <header>
        <nav></nav>
    </header>
    <div id="content">
        <article></article>
        <article></article>
    </div>
    <aside></aside>
    <footer></footer>
</div>


#page {
    position: relative;
    width: 90em;
    height: 90em;
    top: 1em;
    right: 1em;
    bottom: 1em;
    left: 1em;
}

Приведенный выше код заставляет основную оболочку превышать размер экрана как по вертикали, так и по горизонтали.Я хочу, чтобы результаты были равны результату использования 90% вместо 90em для ширины и высоты.

1 Ответ

0 голосов
/ 16 мая 2019

em измерения основаны на font-size

Вам нужно будет либо %, либо vw (единицы просмотра)

Я бы порекомендовал использовать %, поскольку vw / vh может иметь некоторые странные ошибки в мобильном сафари:

100% не всегда совпадает с 100vh, когда отображается адресная строка.

  • 100% уменьшит содержимое до размера, когда в адресной строке отображается
  • 100vh не будет, поэтому ваш контент может отображаться под адресной строкой
...