Consultas de mídia CSS3 para segmentar dispositivo específico - wordpress, css3, design responsivo, consultas de mídia

Eu tenho o meu tema wordpress com CCS básica, agora euQuero tornar este design responsivo para o layout do dispositivo mais usado "s indicado abaixo. E eu quero segmentar todos os dispositivos da Apple na paisagem, bem como no modo retrato: -

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

Como posso escrever minha folha de estilos CSS usando consultas de mídia CSS3 para direcionar dispositivos responsivos?

Respostas:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Aqui é apenas um começo. Você pode ler mais sobre consultas de mídia e outras coisas de design com ressonância nesse blog.

Aqui está uma amostra do código 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 */
}

use media queries olhe este link http://www.craigkunce.com/web.media-queries.html