macem space

Warto ustalać w CSS rozmiar fontów w em-ach, możemy później w prosty sposób zmniejszyć i przystosować layout strony do mniejszych ekranów.

W głównym pliku main.css mam:

body {
    width: 800px;
    margin: auto;
    background: #fff;
}
header h1 {
    font-size: 6.2em;
}
header h2 {
    font-size: 3.7em;
}
footer {
    text-align: center;
    font-size: .75em;
}

Dla urządzeń mobilnych takich jak iPad(landscape) stosuje oddzielny plik mobile.css

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css" type="text/css" /> 

w którym mam reguły które odpowiadają za wielkość fontów i innych elementów strony.

body {
    width: 100%;
    font-size: .8em;
}

Drugi plik CSS jest dla mniejszych urządzeń czy telefonów komórkowych phone.css

<link rel="stylesheet" media="screen and (max-width: 320px)" href="phone.css" type="text/css" />

zmniejszamy tekst

body {
    width: 100%;
    font-size: .5em;
}

dodajemy również meta tag

<meta name="viewport" content="width=device-width" />