Tag : media queries

HomePosts Tagged "media queries"
10 Dic2013
responsive-web-design

Infografica sul Responsive Design

CSS3, , , ,

Templatemonster.com ha rilasciato una guida interattiva sul Responsive Design.

Si inizia dal Glossario dove vengono definiti i termini Responsive Design, Fluid Grids, Flexible Images, CSS Media Queries e Screen Resolutions e si finisce con templates, tutorial e risorse.

Infografica sul Responsive Design ultima modifica: 2013-12-10T09:28:19+00:00 da Piesseweb

Media Queries

CSS3, HTML5, Jquery, ,

media-queri
Media Queries è la risposta di CSS3 al relativo problema dell’adattabilità degli stili grafici a tutti i device e alle diverse risoluzioni.
Media Queries permette di utilizzare un solo foglio di stile per il layout di molteplici dispositivi, andando a sovrascrivere le classi lato css al verificarsi di determinate condizioni preimpostate.

 
/* iPhone e altri smartphones (portrait) */
@media screen and (max-device-width: 320px) {
}
/* iPhone e altri smartphones (landscape) */
@media screen and (max-device-width: 480px) {
}
/* iPhone e altri smartphones (portrait) */
@media screen and (max-device-width: 320px) {
}
/* iPhone e altri smartphones (landscape) */
@media screen and (max-device-width: 480px) {
}
/* iPad e altri tablets (portrait) */
@media screen and (max-device-width: 768px) {
}
/* iPad e altri tablets (landscape) */
@media screen and (max-device-width: 1024px) {
}
/* iPhone 5 (portrait) */
@media screen and (max-device-width: 568px) and (orientation: portrait) {
}
/* iPhone 5 (landscape) */
@media screen and (max-device-width: 568px) and (orientation: landscape) {
}
/* Samsung Galaxy (portrait) */
@media screen and (max-width: 385px) {
}
/* Samsung Galaxy (landscape) */
@media screen and (max-width: 690px) {
}
/* iPhone e altri smartphones (portrait) */
@media screen and (max-device-width: 320px) {
}
/* iPhone e altri smartphones (landscape) */
@media screen and (max-device-width: 480px) {
}
/* iPad e altri tablets (portrait) */
@media screen and (max-device-width: 768px) {
}
/* iPad e altri tablets (landscape) */
@media screen and (max-device-width: 1024px) {
}
/* iPhone 5 (portrait) */
@media screen and (max-device-width: 568px) and (orientation: portrait) {
}
/* iPhone 5 (landscape) */
@media screen and (max-device-width: 568px) and (orientation: landscape) {
}
/* iPad (portrait) */
@media screen and (max-width: 760px) {
}
/* Smartphones (landscape) */
@media screen and (max-width: 480px) {
}
/* Smartphones (portrait) */
@media screen and (max-width: 320px) {
}