Tester un site web Responsive Design

Voici un outil en ligne très pratique pour tester un site web Responsive Design.

L’outil en question est disponible à cette adresse : http://www.isresponsive.com/.

Pour l’utiliser c’est très simple, il vous suffit de saisir l’url de votre site web à tester et de cliquer sur « check » pour que le rendu soit fait sur différentes tailles d’écran de smartphones et de tablettes. Chaque rendu est exécuter dans une « iframe » ce qui vous permet de naviguer sur votre site et de voir directement le rendu de toutes vos pages.

Pour chaque rendu, la Media Query associée est disponible pour l’utilisée directement dans votre code CSS.

Portrait 320 x 480

isresponsive - portrait 320x480

Media Query

@media screen and (max-width: 320px), (min-device-width: 320px) and
(max-device-width: 480px) and (orientation : portrait) {
/* CSS */
}

Paysage 320 x 480

isresponsive - paysage 320x480

Media Query

@media screen and (min-width: 320px) and (max-width: 480px), (min-device-width: 320px) and
(max-device-width: 480px) and (orientation : landscape) {
/* CSS */
}

Portrait 360 x 640

isresponsive - portrait 360x640

Media Query

@media screen and (max-width: 360px), (min-device-width: 360px) and
(max-device-width: 640px) and (orientation : portrait) {
/* CSS */
}

Portrait 600 x 960

isresponsive - portrait 600x960

Media Query

@media screen and (max-width: 600px), (min-device-width: 600px) and
(max-device-width: 960px) and (orientation : portrait) {
/* CSS */
}

Paysage 1024 x 768

isresponsive - paysage 1024x768

Media Query

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

Partager cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *