Ja ongelmat jatkuvat... Pitäisi saada eri tyylit yhdistettyä yhteen css-tiedostoon. Nyt tyylit laajemmille näytöille, moobiilille ja tulostukselle ovat omissa tiedostoissaan. Miten tämä tapahtuu?
Käytä @media-lohkoja.
@media screen {
/* Tyylit ruudulle koosta riippumatta. */
}
@media screen and (min-width: 48em) {
/* Tyylit isommalle ruudulle. */
}
@media print {
/* Tyylit tulostukseen. */
}Yksi kysymys per viestiketju, kiitos.
Metabolix:
Pistäisitkö vielä Pedrosalle esimerkeiksi parit tyylit noiden kommenttien tilalle, jotta hän ymmärtää miten niitä käytetään.
Pedrosa:
Lopuksi kun nämä alkaa olla selviä, kannattanee tutustua wepback / gulp -skripteihin, joilla saat käännettyä kivasti esim. scss-tyylejä. Näissä on helppo muotoilla mobiilityylit yms. suoraan haluttujen elementtien ja luokkien tyylien joukkoon.
Tässä on kokonainen esimerkkisivu, jossa on media queryn lisäksi esitelty muita tärkeitä aiheita: miten sivu keskitetään, miten tulostukseen asetetaan marginaalit, miten tulostukseen asetetaan monta saraketta ja miten ruudulla saa tekstin vilkkumaan.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Esimerkki</title>
<style>
@media screen {
/* Ruudulle perustyylit. */
body {
font-family: sans-serif;
}
.blink {
color: #f00;
outline: 2px solid #6f6;
animation: 1.2s infinite blink;
}
@keyframes blink {
0%, 30% {
opacity: 1;
}
80%, 100% {
opacity: 0;
}
}
}
@media screen and (min-width: 48em) {
/* Isommalla ruudulla asetetaan maksimileveys ja keskitetään sivu. */
html {
display: flex;
justify-content: center;
overflow-y: scroll;
}
body {
flex: auto;
max-width: 48rem;
}
}
@media print {
/* Printtaukseen määritellään kaksi palstaa ja isot marginaalit. */
@page {
margin: 3cm;
}
body {
font-family: serif;
column-count: 2;
column-gap: 1cm;
column-rule: thin solid black;
}
/* Piilotetaan ei-printattavat osat. */
.no-print {
display: none;
}
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p class="blink no-print">HUOMIO! Tämä sivu sopii printattavaksi!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</body>
</html>Kiitos, näistä on ollut paljon apua.
Hienoa Metabolix.
Lisäksi, jos valmiit css-frameworkit kiinnostaa, niin Bootstrap ja muutkin "grid-systeemit" kannattaa testata. Näissä sivusto rakennetaan suoraan css-luokkia elementteihin tunkemalla, jotka määrittelevät minkä levyinen mikäkin elementti on milläkin laitteella.
Bootstrapissä on pienille sivustoille paljon ylimääräistä ja turhaakin mukana, mutta testaamisen arvoinen.
Aihe on jo aika vanha, joten et voi enää vastata siihen.