Media query CSS3 per il targeting di dispositivi specifici: wordpress, css3, responsive-design, media-queries

Ho il mio tema wordpress con CCS di base, ora iovoglio rendere questo design reattivo per i layout di dispositivo più utilizzati "s indicati di seguito. E voglio scegliere come target tutti i dispositivi Apple sia in modalità orizzontale che in modalità verticale: -

blackberry(320x240),
iphone3 (320x480),
iphone4 (640x960),
iphone5 (640x1136),
ipad    (1024x768),
large desktop screen above 1280.

Come posso scrivere il mio foglio di stile CSS utilizzando le query multimediali CSS3 per il targeting di dispositivi reattivi?

risposte:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Qui è solo un antipasto. Puoi leggere di più le domande dei media e altre cose di design riconducibili su quel blog.

Ecco un esempio di codice CSS:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

usa le media query guarda questo link http://www.craigkunce.com/web.media-queries.html