vh

Одиниці вимірювання в CSS: rem, em, px, vh, vw, %

У CSS існує безліч одиниць вимірювання, кожна з яких має свої особливості та використовується для різних завдань. В даній статті ми детально розглянемо такі одиниці: rem, em, px, vh, vw та %, розкриємо їх особливості та дослідимо, як їх використовувати для створення адаптивних та відзначених веб-сайтів.

Rem (Root EM):

Rem – це одиниця відносної висоти шрифту. Особливість rem полягає в тому, що вона відноситься до кореневого (html) елемента сторінки, тому змінюється тільки один раз, коли задається значення. Наприклад, якщо задати шрифт кореневому елементу сторінки 16px, то 1rem буде еквівалентно 16px. Якщо ви задаєте шрифт для дочірнього елементу (тегу) в батьківському елементі, вони будуть наслідувати значення rem, що дозволяє створювати легко масштабовані компоненти.

html {
  font-size: 16px; /* Задає розмір шрифту кореневого елемента у 16 пікселях */
}

p {
  font-size: 1.5rem; /* Задає розмір шрифту у 1.5 раза більше розміру шрифту кореневого елемента, тобто 24px (16px * 1.5) */
  margin-bottom: 1.2rem; /* Задає відступ знизу у 1.2 раза більше розміру шрифту кореневого елемента, тобто 19.2px (16px * 1.2) */
}

Em (Relative to Parent):

Em – це також одиниця відносної висоти шрифту, але вона вимірюється відносно батьківського елементу. Якщо ви задаєте розмір шрифту у батьківському елементі, всі дочірні елементи, що мають значення em, будуть використовувати його як основу. Якщо ніякий батьківський елемент не має заданого розміру шрифту, тоді em буде відноситись до шрифту документа (за замовчуванням 16px).

Px (Pixels):

Px – це абсолютна одиниця вимірювання, яка не залежить від жодного іншого елементу. Вона використовує фіксований розмір в пікселях. При використанні px, елементи завжди матимуть фіксований розмір, що може призводити до проблем з адаптивністю на різних екранах.

Vh (Viewport Height) та Vw (Viewport Width):

Vh та Vw – це відносні одиниці вимірювання, які залежать від висоти (vh) та ширини (vw) видимої області (viewport) браузера. Наприклад, 1vh відповідає 1% висоти видимої області, а 1vw – 1% ширини. Ці одиниці дозволяють створювати елементи, що адаптуються до розміру екрану користувача, що покращує взаємодію з веб-сайтом на різних пристроях.

Пликлад vh:

Пликлад vw:

% (Percentage):

% – це одиниця відносної величини, яка використовує відсотки від батьківського елементу. Наприклад, якщо ширина дочірнього елемента задана як 50%, це означає, що його ширина буде половина ширини батьківського елемента.

Приклад:

Висновок:

Використання правильних одиниць вимірювання в CSS допомагає створювати гнучкі, адаптивні та легко управляються компоненти для веб-сайтів. Rem та em дозволяють забезпечити зручний масштаб, px – точність, а vh, vw та % – адаптивність. Залежно від потреб вашого проекту, ви можете комбінувати ці одиниці, щоб створити привабливі та відзначені веб-інтерфейси для користувачів на будь-яких пристроях.

Відео по Одиницях Виміру в CSS ви можете подивитися у мене на каналі https://youtu.be/9iIahi1AyyQ

ТОП 5 VS Code Розширень

В цій статті я хочу поділитися з вами 5 крутими розширеннями для редактора коду Visual Studio Code. За допомогою даних розширень, ви зможете прискорити вашу роботу в рази.

ТОП 5

Prettier

Розширення Prettier – це незамінний інструмент для автоматичного форматування вашого коду згідно з установленими правилами стилю. Забудьте про ручне форматування – Prettier зробить ваш код стильним і консистентним автоматично. Зосередьтеся на логіці вашого коду, а Prettier забезпечує його привабливий вигляд.

Prettier автоматично відформатую ваш код після зберігання файлу.

prettier extension

ТОП 4

Code Snap

З розширенням Code Snap ви зможете легко створювати скріншоти фрагментів коду та додавати їх до вашого проекту. Забудьте про копіювання і вставлення коду в різних місцях – тепер ви зможете швидко захопити та використовувати фрагменти коду.

ТОП 3

Live Share

Розширення Live Share дозволяє вам спільно працювати над проектами з іншими розробниками в режимі реального часу. Поділіться своїм редактором, виконуйте спільні редагування, налагодження та спілкуйтеся зі своїми колегами безпосередньо у VS Code. Live Share зробить співпрацю із командою простою та продуктивною.

Live share extension

ТОП 2

Bracket Pair

“Bracket Pair Colorizer” – це розширення для Visual Studio Code, яке допомагає зробити код більш читабельним і зрозумілим, особливо при використанні багато рівнів вкладеності та багатогранних умов. Це досягається завдяки візуальному виділенню парних дужок різними кольорами.

Основні функції:

  1. Підсвічування парних дужок: Розширення підкреслює парні дужки, такі як круглі дужки (), квадратні дужки [], фігурні дужки {} та інші, відображаючи їх різними кольорами. При цьому парні дужки одного рівня вкладеності матимуть один колір, що полегшує їх розрізнення у коді.
  2. Кастомізація кольорів: Ви можете налаштувати кольори парних дужок, використовуючи стандартні CSS-кольори або HEX-коди, що дозволяє вам адаптувати розширення до вашого стилю.
  3. Підтримка вкладених дужок: Розширення підтримує різні рівні вкладеності, що дозволяє візуально зрозуміти структуру вкладеного коду.
  4. Ефективне використання простору: Візуальне підсвічування парних дужок допомагає виявити неправильно розміщені або незакриті дужки, що допомагає уникнути помилок.

Загалом, розширення “Bracket Pair Colorizer” є корисним інструментом для програмістів, які працюють з кодом, де часто використовуються парні дужки. Воно спрощує розуміння структури коду і забезпечує більш зручний досвід редагування коду в Visual Studio Code.

Regenerate response

Bracket pair extension

ТОП 1

Tabnine AI

“Tabnine AI” використовує машинне навчання, зокрема технологію глибокого навчання, щоб надавати інтелектуальні підказки та автоматичне доповнення коду під час написання програмного коду. За допомогою цього розширення, розробники можуть покращити продуктивність та швидкість написання коду, так як воно вміє прогнозувати, який код ви намагаєтесь написати на основі введеного контексту.

Основні функції:

Автоматичне доповнення коду: “Tabnine AI” аналізує ваши попередні вирази та шаблони коду, щоб пропонувати автоматичні підказки та завершення під час набору нового коду. Воно пропонує можливі варіанти коду, засновані на тому, як кодували раніше та практиках зміни коду для схожих завдань.

Змішані мови: Розширення може працювати з багатьма мовами програмування та змішувати їх у одному контексті. Це корисно, коли ви маєте справу з проєктами, що використовують різні мови програмування.

Інтелектуальна підказка: “Tabnine AI” намагається передбачити ваші інтенції на основі збережених шаблонів коду та наявних змін в поточному проекті. Воно може зрозуміти, що ви хочете зробити та пропонує варіанти коду для збільшення вашої продуктивності.

Підтримка різних редакторів: “Tabnine AI” може інтегруватися з різними популярними редакторами коду, дозволяючи розробникам використовувати його в зручному середовищі, де вони зазвичай працюють.

Загалом, “Tabnine AI” – це інноваційне розширення, яке пропонує інтелектуальні підказки та автоматичне доповнення коду на основі збережених даних та шаблонів. Воно може бути корисним інструментом для розробників, які хочуть збільшити свою продуктивність та зручність під час написання програмного коду.

tabnine AI extension

І це ще далеко не всі розширення, які доступні для Visual Studio Code. Обираючи найкращі для вашого потреб, ви зможете значно полегшити свою роботу та збільшити продуктивність. Візуальне використання цих розширень можна на моєму каналі https://youtu.be/T9_T07OwzLQ!

Scroll to Top