Какая единица измерения в CSS предпочтительнее для адаптивного дизайна?

Очевидно, это %. Что за глупый вопрос? Ну, вы можете иногда использовать их, может быть. Или, может быть, вх/вх. Ну что угодно, кроме px точно. К сожалению, ответ не так прост. На самом деле, на этот вопрос нет правильного ответа, и он во многом зависит от принятых дизайнерских решений, а не от фиксированного правила адаптивности веб-сайтов. Забавно то, что во многих случаях вы можете захотеть использовать px вместо %, потому что позже все испортится. В этом блоге я попытаюсь описать некоторые сценарии, когда каждый из модулей лучше работает в адаптивной среде. PS: Все это в основном мое личное мнение и опыт работы. Не путать с книгой правил.

Где использовать %?

По сути, везде, где у вас есть определенный вид макета или сетки. Я использую % всякий раз, когда чувствую, что экран нужно разделить на пропорции, а не на фиксированные размеры. Допустим, у меня есть боковая область навигации и оставшаяся часть на веб-сайте. В этом случае я бы использовал % для измерения маржи и области распространения. Так как я определенно хочу изменить их на смене экрана. Или сетка строк и столбцов. Я хочу, чтобы ширина сетки была в процентах, чтобы количество разрешенных столбцов менялось в зависимости от ширины экрана.

Другое использование процента — при определении поля элемента. Возможно, вы захотите иметь гораздо больше полей на более широком экране, чем на меньшем экране. Следовательно, часто желательно, чтобы поля слева и справа были в процентах.

PS: Во многих случаях предпочтительнее использовать flexbox и сетку вместо того, чтобы пытаться размещать вещи с помощью полей и плавающих элементов.

Где использовать пикс?

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

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

Где их использовать?

em в основном используется при настройке размеров шрифта и элементов типографики. Под этим я подразумеваю, что везде, где у меня есть текст, часто полезно использовать em. Размер em в основном зависит от размера шрифта родительского элемента. Таким образом, если родительский элемент имеет размер шрифта 100% (размер шрифта браузера по умолчанию), то 1 em = 16px. Но em — составная мера. Таким образом, чем больше и больше вложенных элементов у вас появляется, тем больше меняется идея или мера их. Поэтому часто бывает очень сложно работать с ними. Но это также функция, которая иногда может помочь получить составной размер шрифта.

Где использовать рем?

Основное различие между em и rem заключается в том, что rem зависит от размера шрифта корневого элемента веб-сайта (в основном root-em) или элемента. Таким образом, каким бы ни был размер шрифта корневого элемента, rem всегда вычисляется на основе этого, и, следовательно, в отличие от em, вычисленное значение пикселя более единообразно для всего веб-сайта. Таким образом, удобство использования rem и em сильно зависит от варианта использования.

Где использовать vh или vw?

vh и vw обозначают высоту и ширину области просмотра. Преимущество vh или vw по сравнению с шириной заключается в том, что вы можете управлять на основе как высоты, так и ширины экрана мультимедиа, который появляется в области просмотра. 1vh в основном означает 1% высоты области просмотра. Поэтому, если вы хотите, чтобы что-то занимало всю высоту экрана, вы должны использовать 100vh. Это имеет приложения как для настройки ширины, так и для настройки размеров шрифта. Вы можете указать, что размер шрифта типографики будет меняться в зависимости от высоты или ширины области просмотра, а не от размера шрифта вашего родительского элемента. Точно так же вы также можете установить высоту строки на основе высоты области просмотра, а не мер родительского элемента.

Даже после стратегического использования всего вышеперечисленного вам почти обязательно нужно будет использовать медиа-запросы. Медиа-запросы — это более определенный набор кодов CSS, основанный на фактической ширине мультимедийного экрана устройства. В основном мы используем его условно, как и другие языки программирования. Таким образом, мы можем упомянуть, что если ширина экрана мультимедиа меньше 720 пикселей, сделайте ее шириной 10%, иначе сделайте ее шириной 25%. Ну, а зачем нам это нужно? Основной причиной этого является соотношение сторон экранов. На рабочем столе ширина экрана намного больше, чем высота, и, следовательно, ширина 25% может не занимать весь экран. Однако на мобильном экране, где ширина намного меньше высоты, 25% могут фактически занимать больше места, чем вы хотите. Следовательно, медиа-запросы нужны, чтобы при переходе от широких экранов к узким экранам менялись даже проценты ширины.

Насколько я понимаю, есть варианты использования и сценарии, в которых каждый из них может быть полезен. Да, пиксели — это наименее используемая единица измерения, если вы беспокоитесь об отзывчивости, но на вашем веб-сайте определенно будут некоторые элементы, которым вы хотите присвоить фиксированную ширину или высоту. Все остальные меры меняются, но то, как они меняются, отличается друг от друга и, следовательно, во многом зависит от дизайнера и внешнего интерфейса. Кроме того, в CSS4 добавлено множество новых функций, которые, по крайней мере, делают работу с макетом намного проще, чем раньше.