Unități absolute în CSS

Unități absolute CSS

O lungime dată într-o unitate absolută este fixă: apare întotdeauna exact la acea dimensiune.

Dimensiunea ecranului nu are niciun efect asupra acestor unități, de aceea nu sunt recomandate pentru site-uri web. Totuși, pot fi utile când mediul de ieșire este cunoscut, aspectul de tipărire fiind un astfel de caz.

Dintre toate, px (pixeli) este cea mai folosită.

Setul complet de unități CSS absolute:

px — Pixeli, prima alegere pentru ecrane (1px = 1/96 din 1in).
cm — Centimetri, în principal pentru foile de stil de tipărire.
mm — Milimetri, în principal pentru foile de stil de tipărire.
in — Inchi, în principal pentru foile de stil de tipărire (1in = 96px = 2.54cm).
pt — Puncte, o unitate din tipografie (1pt = 1/72 din 1in).
pc — Pica, o unitate din domeniul tipăririi (1pc = 12pt).

Setarea dimensiunii fontului cu Px

Dacă dimensionezi textul în px (pixeli), ai control total asupra mărimii cu care apare.

Dezavantajul este că pagina s-ar putea să nu se scaleze bine pe diferite dimensiuni de ecran, iar utilizatorii nu pot schimba dimensiunea textului din setările browserului. Instrumentul de zoom funcționează totuși și redimensionează întreaga pagină.

Notă: Numărul și unitatea nu trebuie separate printr-un spațiu. Dacă valoarea este 0, poți omite unitatea.

Exemplu

Dimensiuni de font date în px:

Creează o pagină care setează dimensiunea fontului lui h1 la 40px, h2 la 30px și p la 17px. Adaugă un titlu și un text de paragraf pentru a demonstra dimensiunile.

> Output: pagină HTML completă

Prompt

Creează o pagină care setează dimensiunea fontului lui h1 la 40px, h2 la 30px și p la 17px. Adaugă un titlu și un text de paragraf pentru a demonstra dimensiunile.

Output: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Size With Px</title>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 17px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Când să folosești unități absolute

Unitățile absolute se potrivesc în situații precum acestea:

Dimensiunile trebuie să fie precise și fixe.
Designul este destinat mediilor de tipărire.
Un element nu trebuie să se scaleze odată cu fereastra de vizualizare (viewport).

Sfat: Unitățile relative precum em sau rem oferă o responsivitate mai bună și merită luate în considerare pentru majoritatea lucrărilor de web design.