CSS => Längdenheter

Introduktion

En CSS-avståndsmätning är ett tal omedelbart följt av en längdenhet (px, em, pc, in, ...)

CSS stöder ett antal längdmätningsenheter. De är absoluta eller relativa.

Syntax

värdesenhet
1em

parametrar

Enhet	Beskrivning
%	Definiera storlekar i termer av överordnade objekt eller aktuella objekt beroende på egendom
em	I förhållande till typsnittet för elementet (2em betyder 2 gånger storleken på det aktuella teckensnittet)
rem	I förhållande till typstorleken för rotelementet
vw	Relativt till 1% av utsiktsbredden *
vh	Relativt till 1% av utsiktshöjden *
Vmin	I förhållande till 1% av visningens * mindre dimension
vmax	I förhållande till 1% av visningens * större dimension
centimeter	centimeter
mm	millimeter
i	tum (1in = 96px = 2,54 cm)
px	pixlar (1px = 1 / 96th av 1in)
pt	poäng (1pt = 1/72 av 1in)
pc	picas (1 st = 12 pt)
s	sekunder (används för animationer och övergångar)
Fröken	millisekunder (används för animationer och övergångar)
ex	I förhållande till x-höjden för det aktuella teckensnittet
ch	Baserat på bredden på nolltecknet (0)
fr	bråkdel (används för CSS Grid Layout)

Anmärkningar

Det kan inte visas ett mellanrum mellan numret och enheten. Men om värdet är 0 kan enheten utelämnas.
För vissa CSS-egenskaper är negativa längder tillåtna.

Teckenstorlek med rem

CSS3 introducerar några nya enheter, inklusive rem enheten, som står för "root em". Låt oss titta på hur rem fungerar.

Låt oss först titta på skillnaderna mellan em och rem .

em : Relativt till teckenstorleken för föräldern. Detta orsakar blandningsfrågan
rem : Relativt till teckenstorleken för roten eller <html> -elementet. Detta innebär att det är möjligt att förklara en enda teckensnittsstorlek för html-elementet och definiera alla rem enheter som en procentandel av det.

Huvudproblemet med att använda rem för fontstorlek är att värdena är något svåra att använda. Här är ett exempel på några vanliga typsnittsstorlekar uttryckta i rem enheter, förutsatt att basstorleken är 16px:

10px = 0,625rem
12px = 0,75rem
14px = 0,875rem
16px = 1rem (bas)
18px = 1,125rem
20px = 1,25rem
24px = 1,5rem
30px = 1,875rem
32px = 2rem

KODA:

html { 
  font-size: 16px; 
}

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

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

Skapa skalbara element med hjälp av rems och ems

Du kan använda rem definieras av font-size på din html tagg till formatelement genom att ställa in deras font-size till ett värde på rem och använda em inuti elementet för att skapa element som skalas med din globala font-size .

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

Relevant CSS:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

Möjligt resultat:

vh och vw

CSS3 introducerade två enheter för att representera storlek.

vh , som står för viewport height är relativt 1% av viewport höjd
vw , som står för viewport width är relativt 1% av visningsbredden

div { 
  width: 20vw; 
  height: 20vh;
}

Ovanför tar storleken för div upp 20% av utsiktsbredd och höjd

vmin och vmax

vmin : Relativt till 1 procent av visningens mindre dimension
vmax : Relativt till 1 procent av visningens större dimension

Med andra ord är 1 vmin lika med den mindre på 1 vh och 1 vw

1 vmax är lika med den större av 1 vh och 1 vw

Obs! vmax stöds inte i:

vilken version av Internet Explorer som helst
Safari före version 6.1

använder procent%

En av de användbara enheterna när du skapar en lyhörd applikation.

Storleken beror på dess överordnade behållare.

Ekvation:

(Parent Containers bredd) * (Procentandel (%)) = Output

Till exempel:

Förälder har 100px bredd medan barnet har 50% .

På utgången kommer barnets bredd att vara hälften (50%) av föräldrarnas , vilket är 50px .

html

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

PRODUKTION

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

CSS
Längdenheter

Sök…