Mittasuhteissa esitellään CSS-ohjeet joilla asetetaan yleensä leveys sekä tarvittaessa korkeus erilaisille HTML-elementeille.
Esimerkissä asetetaan CSS-ohjeilla,
Esimerkin koodaus: Mobiililaitteiden takia on hyvä määritellä HTML-elementin leveys prosetteina sekä tarvittaessa korkeus pikseleinä.
Huomaa kuitenkin kuvien sekä videoiden vääristyvän jos korkeus määritellään. Elementille määritelty korkeudeksi 150px ja leveydeksi 60% Esimerkin koodaus: Maksimileveyden asettaminen estää elementin esittämisen asetettua suurempana mutta sallii elementin esittämisen kapeampana. Elementille määritelty korkeudeksi 100px ja maksimi leveydeksi 300px Esimerkin koodaus: CSS-ohjeella min-width voidaan asettaa elementille minimi leveydelle, leveys josta elementti ei enään kapene.
leveys2 div-elementin leveyksi 50% kun div-elementti on sijoitettu leveys1-ohjeella muotoillun sisään
Huomaa ! Sisempi poksi ei ole tarkalleen 50% ulomman poksin leveydestä.
CSS-ohjeet
.leveys100 {
width: 100%;
border: 1px solid BLUE;
}
.leveys50 {
width: 50%;
border: 1px solid RED;
}
HTML-koodaus
<div class="leveys100">
Div jolla CSS-ohje <i>leveys100</i>.
<div class="leveys50">
Div jolla CSS-ohje <i>leveys50</i>.
</div>
</div>
Leveys % ja korkeus px
Korkeuden lukitseminen johonkin pikselilukuun voi aiheuttaa mobiililaitteissa elementin sisällön "valumisen ulos" elementistä tai
liukusäätimen ilmestymisen elementin reunaan.
CSS-ohjeet
div.loota {
height: 100px;
width: 50%;
border: 1px solid GREEN;
background-color: RGB(249, 255, 230);
}
p.tayte {
padding: 15px;
}
HTML-koodaus
<div class="loota">
<p class="tayte"> Elementille määritelty korkeudeksi 150px ja leveydeksi 60% </p>
</div>
Maksimileveys
CSS-ohjeet
.lootaA {
max-width: 300px;
height: 100px;
background-color: rgb(204, 255, 230);
}
p.tayte {
padding: 15px;
}
HTML-koodaus
<div class="lootaA">
<p class="tayte"> Elementille määritelty korkeudeksi 100px ja
maksimi leveydeksi 300px </p>
</div>