July 1
Con la proliferazione di smartphone come l'iPhone, siti web sempre più stanno facendo il salto verso il mondo mobile con disegni che rispondono alle diverse dimensioni dello schermo. È possibile rilevare le dimensioni dello schermo e definire stili speciali per loro tramite CSS o Cascading Style Sheet, media query. Scrivi media query nei vostri fogli di stile per determinare l'orientamento iPhone di mira le dimensioni dello schermo di ciascuno.
1 Aprire il file CSS e aggiungere questo codice in basso:
@media solo schermo e (max-device-width: 640px) {
}
Questa media query gestisce il ritratto, o verticale, l'orientamento di iPhone.
2 Aggiungere un altro media query al di sotto del primo, questa volta mira il orientamento orizzontale:
@media solo schermo e (min-device-width: 640px) e (max-device-width: 960px) {
}
3 Scrivi regole CSS che si applicano al orientamento verticale all'interno della media query mira schermi a 320 pixel e sotto. Fare lo stesso per l'orientamento orizzontale, ma mettere le regole all'interno del media query per gli schermi meno di 480 pixel:
@media solo schermo e (max-device-width: 640px) {
h2 {
font-size: 24px;
}
}
@media solo schermo e (min-device-width: 640px) e (max-device-width: 960px) {
h2 {
font-size: 36px;
}
}
Ricordare che solo le regole di stile che differiscono da ciò che si desidera visualizzare su schermi normali dovrebbe andare dentro le media query. Non ripetere il codice CSS troppo, o sarà difficile da gestire.