Ответственные размеры с em

Question

Сегодня появилась идея, и я хочу узнать мнение других людей, прежде чем приступать к ее использованию. Каковы плюсы и минусы для использования em почти для всех объектов (paddings, font-size, width, , , , и контролировать их на уровне блоков, задав размер шрифта для их ближайшего родителя? Я привел пример ниже. Благодарю.

.steps { 
 
    border: 1px solid #000; 
 
    font-size: 16px; 
 
} 
 

 
.steps__item { 
 
    display: inline-block; 
 
    height: 6.375em; 
 
    min-width: 8.4375em; 
 
    margin: 0.375em 1.4375em; 
 
    position: relative; 
 
    text-align: center; 
 
    border: 3px solid transparent; 
 
} 
 
.steps__item--selected { 
 
    border-color: #70b631; 
 
} 
 
.steps__item:hover { 
 
    border-color: #70b631; 
 
} 
 
.steps__wrapper { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 50%; 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    
 
    
 
} 
 

 
.steps__wrapper img { 
 
    width:3.75em; 
 
    } 
 

 
.steps__description { 
 
    display: block; 
 
    font-size: 0.8125em; 
 
    font-weight: 600; 
 
    color: #000; 
 
    padding: 0.625em 0.625em 0 0.625em; 
 
}

<section class="steps"> 
 
    <a href="javascript:void(0)" class="steps__item steps__item--selected "> 
 
    <div class="steps__wrapper"> 
 
     <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt=""> 
 
     <span class="steps__description">1. Produkt hinzufügen</span> 
 
    </div> 
 
    <!-- end steps__wrapper --> 
 
    </a> 
 
    <!-- end steps__item --> 
 

 
    <a href="javascript:void(0)" class="steps__item "> 
 
    <div class="steps__wrapper"> 
 
     <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt="tshirt image"> 
 
     <span class="steps__description">2. Druck hinzufügen</span> 
 
    </div> 
 
    <!-- end steps__wrapper --> 
 
    </a> 
 
    <!-- end steps__item --> 
 

 
    <a href="javascript:void(0)" class="steps__item"> 
 
    <div class="steps__wrapper"> 
 
     <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt="email icon"> 
 
     <span class="steps__description">3. Gratis Angebot direkt erhalten</span> 
 
    </div> 
 
    <!-- end steps__wrapper --> 
 
    </a> 
 
    <!-- end steps__item --> 
 
</section> 
 
<!-- end steps -->

Answer 1

Это абсолютный неправильный подход к выбору устройства. Каждый блок создается по определенной причине: em/rem зависят от предпочтений пользователей, vh/vw относятся к размеру видового экрана и т. Д. Унификация используемого устройства не имеет смысла, поскольку вы должны выбрать наиболее подходящий блок для настройки. Поэтому неплохо использовать em/rem для размеров шрифтов, но это не для создания контейнера, который должен быть на две трети ширины, как его родитель. Поэтому процентные ставки выполняются просто отлично. Реагирующий дизайн не сделан из определенной единицы, сначала он выполнен из дизайна, и хорошее представление о том, как вещи должны быть разных размеров. Обращая это в реальность, вы должны решить, какую единицу использовать, нет «одной для всей истины».

UPDATE

Это, вероятно, стоит упомянуть, как я пришел к этому: Я когда-то, когда я обнаружил rem первый, начался с функцией Sass, чтобы преобразовать каждый и все для rem, так что мне пришлось a px2em($px) и преобразовать все возможные значения, используя это. Поскольку не было требований, которые должны были быть решены с использованием процентов, все это стало хорошо. Но я столкнулся с несколькими проблемами, которые сделали его ненужным сложным, даже бесполезным. Одна из основных проблем была связана с вопросами округления, когда речь заходила о границах линии: Предполагая, что 1em равно 16px (если пользователь этого не изменил), граница с шириной 1px станет 0,0625rem, что, в свою очередь, привело к изменению ширины рендеринга между браузерами, переключение обратно на px просто решило это. В заключение я получил макет, который был связан с rem, что является фиксированной единицей относительно определенной базы, поэтому изменение базы привело к не что иное, как масштабирование. После того, как вы сделали все обходы, у меня появилась страница с нечувствительной записью, которую можно было бы масштабировать, изменив размер шрифта по умолчанию, вместо того, чтобы просто использовать ctrl+ или его контраст касания.

В двух словах: Единицы - это инструменты в вашем ящике инструментов и отклонение определенного инструмента или предпочтение друг другу, так же полезно, как использование молотка на винтах. Даже если это возможно, просто имеет смысл использовать отвертку, если таковая имеется.

Answer 2

Вы должны абсолютно использовать em для всех размеров, чтобы полностью адаптивный дизайн.

Конечно, могут быть некоторые исключения, когда вам нужно иметь фиксированный пиксельный или процентный размер, поэтому оставьте себе пространство, чтобы быть гибким.

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