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

] Почему имеют значение размеры CSS

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

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

] Абсолют против относительных единиц: в чем разница?

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

]
• абсолютные единицы довольно просты. Они исправлены и не меняются, независимо от размера экрана. Думайте о них, как правитель, который никогда не меняется.
• Относительные единицы, с другой стороны, изменения, основанные на среде, в которой они используются. Именно здесь появляется гибкость, и это то, что делает возможным отзывчивый дизайн. Давайте посмотрим на обе категории.
]

] Абсолютные единицы: старый школьный путь

Абсолютные единицы - это то, как они звучат - накапливаются в камне. Они не заботятся о размере экрана, макете или любом другом факторе. Когда вы используете абсолютные единицы, вы блокируете размеры элементов. Хотя это дает вам полный контроль, это также означает, что ваш дизайн может не хорошо адаптироваться к разным экранам.
] Вот некоторые из наиболее распространенных абсолютных единиц:

]
• ] pixels (px): классический выбор для точного размера. Один пиксель соответствует одной точке на экране.
]
• ] сантиметры (cm), миллиметра (мм), дюймы (in): эти блоки более распространены для проектирования печати, но могут использоваться в веб -дизайне, если это необходимо.
]
• ] points (pt), picas (pc): заимствовано в мире печати, они полезны для таких вещей, как стили печати, но не часто используются для веб -дизайна. Хотя абсолютные единицы могут помочь сделать вещи резкими, они не предлагают большой гибкости для современных отзывчивых веб -сайтов. И вот где вступают относительные подразделения.
]

] Относительные единицы: реальная сила гибкости

относительные подразделения, где происходит магия. Эти подразделения масштабируются на основе окружающего контента или размера экрана, что делает их идеальными для создания дизайнов, которые выглядят великолепно везде, от небольших экранов до огромных мониторов.
] Давайте посмотрим на ключевые относительные единицы:

] Проценты (%)

Процентный блок - это гибкость. Если вы установите ширину элемента до 50%, он займет половину размера своего родительского контейнера, независимо от того, насколько большим или маленьким, этот контейнер. Это идеально подходит для отзывчивых макетов, где вы хотите, чтобы все было настраивать на основе доступного пространства.
]

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

] EM и REM: масштабирование с помощью текста

подразделения EM и REM основаны на размере шрифта, но они работают по -разному:

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

html {
  font-size: 16px; /* Set base font size */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1.5em; /* 24px, based on the parent element's font size */
}

] Единицы Viewport (VW, VH)

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

]
• ] vw: 1VW - 1% от ширины просмотра.
• ] vh: 1vh - 1% от высоты видового порта. Они особенно полезны для современных, жидких макетов.
]

.hero {
  width: 100vw; /* Full width of the viewport */
  height: 100vh; /* Full height of the viewport */
}

] Какое устройство вы должны использовать?

Итак, как вы решаете, какое устройство использовать для вашего дизайна? Вот несколько указателей:

]
• для фиксированных элементов: используйте PX, когда вам нужен абсолютный элемент управления. Такие вещи, как значки, границы и другие маленькие элементы, которые требуют точных размеров, идеально подходят для пикселей.
]
• для макетов жидкости: используйте %, когда вы хотите, чтобы элементы адаптировались в зависимости от размера их контейнера. Это отлично подходит для сетей, столбцов или разделов, которые должны масштабироваться или вниз с размером экрана.
• для типографии: используйте REM для согласованности на вашем сайте, и EM для локальных корректировок на основе размера шрифта родительского контейнера.
]
• для полноэкранных разделов: Используйте VW и VH для создания разделов, которые занимают весь размер просмотра, независимо от размеров экрана.
]

] Распространенные ошибки, чтобы избежать

даже опытные дизайнеры иногда делают ошибки при использовании единиц размера CSS. Вот что следить:

]
1. слишком сильно полагается на пиксели: хотя PX легко использовать, это не очень помогает для адаптивного дизайна.
]
2. игнорируя размер шрифта корня: если вы используете REM, обязательно установите размер базового шрифта в элементе HTML. В противном случае ваша типография может выглядеть непоследовательной.
]
3. несовместимое использование единицы: смешивание PX, %и EM без четкой стратегии может привести к непредсказуемым результатам. Сохраняйте использование вашего устройства в соответствии.
]

] Обертывание: единицы размера CSS

единицы размера CSS необходимы для создания веб -сайтов, которые хорошо работают на любом экране. С абсолютными единицами, такими как PX и гибкие, такие как %, EM, REM и ViewPort, вы можете разработать отзывчивые макеты, которые красиво адаптируются по устройствам.

Ключ должен понять, когда использовать каждую единицу и как они взаимодействуют друг с другом. Освоение размеров CSS, вы разблокируете весь потенциал адаптивного веб -дизайна и создаете сайты, которые выглядят потрясающе везде.
] Итак, выходите туда, экспериментируйте с этими подразделениями и сделайте ваши конструкции более плавными и отзывчивыми, чем когда -либо прежде!
] Счастливого дизайна!