{"id":747777,"date":"2023-10-15T19:56:44","date_gmt":"2023-10-16T01:56:44","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/forsta-enheter-i-css-en-komplett-guide\/"},"modified":"2023-10-15T19:56:44","modified_gmt":"2023-10-16T01:56:44","slug":"forsta-enheter-i-css-en-komplett-guide","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/forsta-enheter-i-css-en-komplett-guide\/","title":{"rendered":"F\u00f6rst\u00e5 enheter i CSS: En komplett guide"},"content":{"rendered":"

CSS (Cascading Style Sheets) \u00e4r en avg\u00f6rande komponent i modern webbdesign. Det \u00e4r spr\u00e5ket som ger din webbplats dess utseende. Men f\u00f6r att verkligen beh\u00e4rska CSS m\u00e5ste du f\u00f6rst\u00e5 de enheter den anv\u00e4nder f\u00f6r att m\u00e4ta saker som l\u00e4ngd, vinkel, tid och uppl\u00f6sning.<\/p>\n

<\/figure>\n

I den h\u00e4r guiden diskuterar vi varje typ av CSS-enhet och ger f\u00f6rklaringar och praktiska exempel f\u00f6r att hj\u00e4lpa dig f\u00f6rst\u00e5 hur de anv\u00e4nds. Vi kommer att t\u00e4cka allt fr\u00e5n absoluta och relativa l\u00e4ngdenheter<\/strong> som px, em, rem och utsiktsplatser<\/strong> som vw, vh, till mer specialiserade enheter som grader f\u00f6r rotation, sekunder s och millisekunder ms f\u00f6r animeringstid och till och med punkter per tum dpi f\u00f6r uppl\u00f6sning.<\/p>\n

Genom att f\u00f6rst\u00e5 dessa CSS-enheter f\u00e5r du mer kontroll \u00f6ver dina layouter, vilket resulterar i mer exakta, lyh\u00f6rda och visuellt tilltalande layouter.<\/p>\n

<\/span>1. Absoluta l\u00e4ngder<\/span><\/h4>\n
<\/span>px (pixlar)<\/span><\/h5>\n

Detta \u00e4r den mest anv\u00e4nda enheten inom webbdesign. En pixel representerar en enda punkt p\u00e5 en datorsk\u00e4rm.<\/p>\n

Exempel:<\/u> teckenstorlek: 16px; st\u00e4ller in teckensnittsstorleken till 16 pixlar.<\/p>\n

<\/span>cm (centimeter)<\/span><\/h5>\n

Denna enhet anv\u00e4nds inte ofta i webbdesign eftersom sk\u00e4rmstorlekar och uppl\u00f6sningar varierar mycket mellan enheter. Det kan dock vara anv\u00e4ndbart f\u00f6r tryckta medier.<\/p>\n

Exempel:<\/u> bredd: 10 cm; st\u00e4ller in bredden p\u00e5 ett element till 10 centimeter.<\/p>\n

<\/span>mm (millimeter)<\/span><\/h5>\n

Precis som centimeter anv\u00e4nds inte millimeter ofta i webbdesign, men de kan vara anv\u00e4ndbara f\u00f6r tryckta medier.<\/p>\n

Exempel:<\/u> bredd: 100 mm; st\u00e4ller in bredden p\u00e5 ett element till 100 millimeter.<\/p>\n

<\/span>i tum)<\/span><\/h5>\n

Denna enhet \u00e4r ocks\u00e5 mer anv\u00e4ndbar f\u00f6r tryckta medier \u00e4n webbdesign.<\/p>\n

Exempel:<\/u> Bredd: 4 tum; st\u00e4ller in bredden p\u00e5 ett element till 4 tum.<\/p>\n

<\/span>pt (po\u00e4ng)<\/span><\/h5>\n

Points anv\u00e4nds traditionellt i tryckta medier (1 punkt \u00e4r lika med 1\/72 av en tum). I CSS \u00e4r punkter anv\u00e4ndbara f\u00f6r att skapa exakt utskrivbara stilar.<\/p>\n

Exempel:<\/u> teckenstorlek: 12 punkter; st\u00e4ller in teckenstorleken till 12 punkter.<\/p>\n

<\/span>pc (spicas)<\/span><\/h5>\n

En pica motsvarar 12 po\u00e4ng. Det \u00e4r en annan enhet som anv\u00e4nds mer i tryck \u00e4n webbdesign.<\/p>\n

Exempel:<\/u> teckenstorlek: 1 st; st\u00e4ller in teckenstorleken till 12 punkter.<\/p>\n

<\/span>Absolut l\u00e4ngd i CSS:<\/span><\/h5>\n

Nedan \u00e4r ett exempel p\u00e5 hur dessa enheter kan anv\u00e4ndas i en CSS-regel:<\/p>\n

\r\ndiv {\r\n    width: 300px;\r\n    height: 20cm;\r\n    padding: 5mm;\r\n    border: 1in solid black;\r\n    font-size: 14pt;\r\n    margin: 1pc;\r\n}<\/pre>\n
Kodf\u00f6rklaring:<\/strong><\/p>\n
div-elementet skulle ha en bredd p\u00e5 300 pixlar, en h\u00f6jd p\u00e5 20 centimeter, en stoppning p\u00e5 5 millimeter, en ram p\u00e5 1 tum bred, en teckenstorlek p\u00e5 14 punkter och en marginal p\u00e5 1 pica.<\/p>\n
Observera dock att dessa enheter kan spela olika p\u00e5 olika sk\u00e4rmar och enheter p\u00e5 grund av olika pixelt\u00e4theter och sk\u00e4rmstorlekar.<\/p>\n
<\/span>2. Relativa l\u00e4ngder<\/span><\/h4>\n
<\/span>de<\/span><\/h5>\n
Denna enhet \u00e4r i f\u00f6rh\u00e5llande till teckenstorleken p\u00e5 elementet.<\/p>\n
Exempel:<\/u> Om ett element har en teckenstorlek p\u00e5 16px, \u00e4r 1em = 16px f\u00f6r det elementet.  Om du st\u00e4ller in marginalen: 2em;, kommer marginalen att vara tv\u00e5 g\u00e5nger den nuvarande teckenstorleken.<\/p>\n
<\/span>snabba \u00f6gonr\u00f6relser<\/span><\/h5>\n
Denna enhet \u00e4r relativ till teckenstorleken f\u00f6r rotelementet (vanligtvis elementet).  Om rotelementet har en teckenstorlek p\u00e5 20px, d\u00e5 \u00e4r 1rem = 20px f\u00f6r n\u00e5got element p\u00e5 sidan.<\/p>\n
Exempel:<\/u> teckenstorlek: 1,5 rem;  kommer att st\u00e4lla in teckenstorleken till 1,5 g\u00e5nger teckenstorleken f\u00f6r rotelementet.<\/p>\n
<\/span>ex<\/span><\/h5>\n
Denna enhet \u00e4r relativt x-h\u00f6jden p\u00e5 det aktuella teckensnittet (ungef\u00e4r h\u00f6jden p\u00e5 gemener).  Det \u00e4r inte i vanligt bruk.<\/p>\n
<\/span>kap<\/span><\/h5>\n
Denna enhet \u00e4r lika med bredden p\u00e5 “0” (noll) f\u00f6r det aktuella teckensnittet.<\/p>\n
Exempel:<\/u> bredd: 20 kanaler;  kommer att skapa ett element som \u00e4r 20 “0” tecken brett.<\/p>\n
<\/span>vw (Viewport Width)<\/span><\/h5>\n
Denna enhet \u00e4r lika med 1 % av visningsportens bredd.<\/p>\n
Exempel:<\/u> bredd: 50vw;  kommer att skapa ett element 50 % av visningsportens bredd.<\/p>\n
<\/span>vh (viewport h\u00f6jd)<\/span><\/h5>\n
Denna enhet \u00e4r lika med 1 % av visningsportens h\u00f6jd.<\/p>\n
Exempel:<\/u> h\u00f6jd: 70vh;  kommer att skapa ett element som \u00e4r 70 % s\u00e5 h\u00f6gt som visningsporten.<\/p>\n
<\/span>vmin<\/span><\/h5>\n
Denna enhet \u00e4r lika med 1 % av den minsta dimensionen (bredd eller h\u00f6jd) av visningsporten.<\/p>\n
Exempel:<\/u> teckenstorlek: 4vmin;  kommer att st\u00e4lla in teckensnittsstorleken till 4 % av visningsportens minsta dimension.<\/p>\n
<\/span>vmax<\/span><\/h5>\n
Denna enhet \u00e4r lika med 1 % av den st\u00f6rsta dimensionen (bredd eller h\u00f6jd) av visningsporten.<\/p>\n
Exempel:<\/u> teckenstorlek: 4vmax;  kommer att st\u00e4lla in teckensnittsstorleken till 4 % av visningsportens st\u00f6rsta dimension.<\/p>\n
<\/span>%<\/span><\/h5>\n
Denna enhet \u00e4r relativ till det \u00f6verordnade elementet.<\/p>\n
Exempel:<\/u> Om du st\u00e4ller in bredden: 50%;, kommer elementet att ta upp halva bredden av sitt \u00f6verordnade element.<\/p>\n
<\/span>Relativ l\u00e4ngd i CSS:<\/span><\/h5>\n
Nedan \u00e4r ett exempel p\u00e5 hur dessa enheter kan anv\u00e4ndas i en CSS-regel:<\/p>\n
\r\ndiv {\r\n    font-size: 2em;\r\n    padding: 1.5rem;\r\n    width: 75vw;\r\n    height: 50vh;\r\n    margin: 5vmin;\r\n    line-height: 200%;\r\n}<\/pre>\n
F\u00f6rklaring:<\/strong><\/p>\n
div-elementet skulle ha en teckenstorlek som \u00e4r dubbelt s\u00e5 stor som dess \u00f6verordnade, en utfyllnad 1,5 g\u00e5nger rotteckensnittsstorleken, en bredd p\u00e5 75 % av visningsportens bredd, en h\u00f6jd p\u00e5 50 % av visningsportens h\u00f6jd, visningsporten och en marginal p\u00e5 5 % av visningsportens minsta dimension.  Radh\u00f6jden \u00e4r 200 % av den aktuella teckenstorleken.<\/p>\n
<\/span>3. Tidsenheter<\/span><\/h4>\n
<\/span>s (sekunder)<\/span><\/h5>\n
Denna enhet representerar en tidsl\u00e4ngd i sekunder.  Det anv\u00e4nds ofta med animerings- och \u00f6verg\u00e5ngsegenskaper.<\/p>\n
Exempel:<\/u> animationsl\u00e4ngd: 2s;  Det skulle g\u00f6ra att en animation varar i 2 sekunder.<\/p>\n
<\/span>ms (millisekunder)<\/span><\/h5>\n
Denna enhet representerar en tidsl\u00e4ngd i millisekunder, d\u00e4r 1000 millisekunder \u00e4r lika med 1 sekund.  Anv\u00e4nds \u00e4ven med animerings- och \u00f6verg\u00e5ngsegenskaper.<\/p>\n
Exempel:<\/u> \u00f6verg\u00e5ngsl\u00e4ngd: 500 ms;  skulle g\u00f6ra en \u00f6verg\u00e5ng som varar i 500 millisekunder, eller en halv sekund.<\/p>\n
<\/span>Tidsenheter i CSS #1:<\/span><\/h5>\n
Nedan \u00e4r ett exempel p\u00e5 hur dessa enheter kan anv\u00e4ndas i en CSS-regel:<\/p>\n
\r\ndiv {\r\n    transition: background-color 0.5s ease-in-out;\r\n    animation: move 2s infinite;\r\n}\r\n\r\n@keyframes move {\r\n    0% { transform: translateX(0); }\r\n    100% { transform: translateX(100px); }\r\n}<\/pre>\n
Kodf\u00f6rklaring:<\/strong><\/p>\n
div-elementet skulle ha en \u00f6verg\u00e5ng som \u00e4ndrar bakgrundsf\u00e4rgen p\u00e5 0,5 sekunder och en animering som flyttar elementet fr\u00e5n dess nuvarande position 100 pixlar till h\u00f6ger p\u00e5 2 sekunder.  Animeringen upprepas i o\u00e4ndlighet p\u00e5 grund av det o\u00e4ndliga nyckelordet.<\/p>\n
<\/span>Tidsenheter i CSS #2:<\/span><\/h5>\n
Ett annat exempel kan vara en \u00f6verg\u00e5ng eller animering:<\/p>\n
\r\ndiv {\r\n    transition: all 2s ease 1s; \/* transition will start after 1 second delay *\/\r\n    animation: spin 4s linear 0.5s infinite; \/* animation will start after 0.5 second delay *\/\r\n}\r\n\r\n@keyframes spin {\r\n    from { transform: rotate(0deg); }\r\n    to { transform: rotate(360deg); }\r\n}<\/pre>\n
Kodf\u00f6rklaring:<\/strong><\/p>\n
div-elementet har en \u00f6verg\u00e5ng som startar efter 1 sekunds f\u00f6rdr\u00f6jning och en animering som startar efter 0,5 sekunders f\u00f6rdr\u00f6jning.  Animationen f\u00e5r div:n att rotera p\u00e5 obest\u00e4md tid.<\/p>\n
<\/span>4. Uppl\u00f6sningsenheter<\/span><\/h4>\n
Uppl\u00f6sningsenheter i CSS anv\u00e4nds f\u00f6r att specificera pixelt\u00e4theten f\u00f6r utenheter.  De anv\u00e4nds fr\u00e4mst i mediefr\u00e5gor f\u00f6r att erbjuda olika stilar till enheter med olika pixelt\u00e4theter.<\/p>\n
<\/span>dpi (punkter per tum)<\/span><\/h5>\n
Denna enhet representerar antalet pixlar per tum.<\/p>\n
Exempel:<\/u> En mediefr\u00e5ga som @media (minsta uppl\u00f6sning: 300 dpi) {…} skulle till\u00e4mpa stilarna i h\u00e4ngslen endast p\u00e5 enheter med en pixelt\u00e4thet p\u00e5 minst 300 punkter per tum.<\/p>\n
<\/span>dpcm (punkter per centimeter)<\/span><\/h5>\n
Denna enhet representerar antalet pixlar per centimeter.  Det liknar dpi, men anv\u00e4nder centimeter ist\u00e4llet f\u00f6r tum.<\/p>\n
Exempel:<\/u> @media (minsta uppl\u00f6sning: 118 dpcm) {…} skulle till\u00e4mpa stilarna p\u00e5 enheter med en pixelt\u00e4thet p\u00e5 minst 118 punkter per centimeter.<\/p>\n
<\/span>dppx (Enhet av po\u00e4ng per px)<\/span><\/h5>\n
Denna enhet representerar antalet punkter per CSS-pixelenhet.  En CSS-pixel kan motsvara flera fysiska pixlar p\u00e5 en h\u00f6gdensitetssk\u00e4rm.<\/p>\n
Exempel:<\/u> @media (minsta uppl\u00f6sning: 2dppx) {…} skulle till\u00e4mpa stilarna p\u00e5 enheter med en pixelt\u00e4thet p\u00e5 minst 2 punkter per enhet CSS-pixlar.<\/p>\n
<\/span>Uppl\u00f6sningsenheter i CSS: <\/span><\/h5>\n
Nedan \u00e4r ett exempel p\u00e5 hur dessa enheter kan anv\u00e4ndas i en CSS-regel:<\/p>\n
\r\n@media (min-resolution: 2dppx) {\r\n    body {\r\n        background-image: url(\"high-res-background.png\");\r\n    }\r\n}\r\n\r\n@media (max-resolution: 1.5dppx) {\r\n    body {\r\n        background-image: url(\"low-res-background.png\");\r\n    }\r\n}<\/pre>\n
Kodf\u00f6rklaring:<\/strong><\/p>\n
Enheter med en pixelt\u00e4thet p\u00e5 2 punkter per CSS-pixel eller h\u00f6gre skulle anv\u00e4nda den h\u00f6guppl\u00f6sta bakgrundsbilden, medan enheter med en pixeldensitet p\u00e5 1,5 punkter per CSS-pixel eller l\u00e4gre skulle anv\u00e4nda den h\u00f6guppl\u00f6sta bakgrundsbilden.<\/p>\n
<\/span>    5. Vinkelenheter<\/span><\/h4>\n
Vinkelenheter i CSS anv\u00e4nds f\u00f6r att specificera rotation och riktning.  De anv\u00e4nds ofta med egenskaper som transformation och gradient.<\/p>\n
<\/span>grader (grader)<\/span><\/h5>\n
Denna enhet representerar en vinkel i grader.<\/p>\n
Exempel:<\/p>\n
transformera: rotera (45 grader);  skulle rotera ett element 45 grader medurs.<\/p>\n
<\/span>grad (gradianer)<\/span><\/h5>\n
Denna enhet representerar en vinkel i gradianer, d\u00e4r 100 gradianer motsvarar en r\u00e4t vinkel.<\/p>\n
Exempel:<\/p>\n
transformera: rotera (100 grader);  skulle rotera ett element 90 grader medurs.<\/p>\n
<\/span>rad (radianer)<\/span><\/h5>\n
Denna enhet representerar en vinkel i radianer, d\u00e4r 2 \u00d7 radianer \u00e4r lika med en hel cirkel.<\/p>\n
Exempel:<\/p>\n
transform: rotate(3.14159rad);  skulle rotera ett element 180 grader.<\/p>\n
<\/span>vika ihop<\/span><\/h5>\n
Denna enhet representerar en hel cirkel.<\/p>\n
Exempel:<\/p>\n
transformera: rotera (0,5 varv);  skulle rotera ett element 180 grader.<\/p>\n
<\/span>Vinkelenheter i CSS:<\/span><\/h5>\n
Ett exempel p\u00e5 hur dessa enheter kan anv\u00e4ndas i en CSS-regel:<\/p>\n
\r\ndiv {\r\n    transform: rotate(45deg);\r\n}\r\n\r\ndiv:hover {\r\n    transform: rotate(0.5turn);\r\n}<\/pre>\n
Kodf\u00f6rklaring:<\/strong><\/p>\n
div-elementet skulle roteras 45 grader som standard.  N\u00e4r du h\u00e5ller muspekaren \u00f6ver div:n kommer den att rotera 180 grader (0,5 helt varv).<\/p>\n
<\/span>Bonus: Flexion<\/span><\/h4>\n
<\/span>fr (br\u00f8kenhet)<\/span><\/h5>\n
Denna enhet anv\u00e4nds med CSS Grid Layout och representerar en br\u00e5kdel av det tillg\u00e4ngliga utrymmet i rutn\u00e4tsbeh\u00e5llaren.  Om du har ett rutn\u00e4t med tv\u00e5 kolumner inst\u00e4llda p\u00e5 1fr 2fr, kommer den f\u00f6rsta kolumnen att ta upp en tredjedel av det tillg\u00e4ngliga utrymmet och den andra kolumnen kommer att ta upp tv\u00e5 tredjedelar.<\/p>\n
Exempel:<\/u><\/p>\n
\r\n.grid-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 2fr;\r\n}<\/pre>\n
Det totala tillg\u00e4ngliga utrymmet \u00e4r uppdelat i 3 lika delar (1fr + 2fr = 3fr), den f\u00f6rsta kolumnen upptar 1\/3 av utrymmet och den andra kolumnen upptar 2\/3 av utrymmet.<\/p>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n