Développement d'un site Web réactif, indépendant de la résolution de l'appareil

Question

Je suis très novice en matière de développement Web et j'essaie de développer un site Web réactif. J'ai décidé sur 5 points de rupture, à savoir mobile (2-portrait-paysage) de 320px-768px, tablettes (2-portrait-paysage) de 769px-1024px, Desktop-Small de 1025px-1280px, Desktop-Medium de 1281px-1366px, Desktop-Large de 1367px-1680px et Desktop-ExtraLarge de 1681px-dessus.

Quand je teste ma première mise en page, développé sur un Mac-Retina-13" , le site avait l'air assez bien sur Safari & Chrome. Mais, complètement altérait sur un Acer Windows-15" , sur Firefox & Chrome .

Ensuite, avec quelques recherches, j'ai appris à connaître http://mydevice.io/ et Device-pixel-ratios.

Je voudrais savoir, afin d'avoir une expérience visuelle cohérente, à travers l'appareil indépendamment des résolutions d'écran & tailles d'écran, vais-je utiliser les requêtes de médias suivantes?

/* Phones - portait */ 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 96dpi) { 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 144dpi){ 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 192dpi){ 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 288dpi){ 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) and (min-resolution: 384dpi){ 

} 

/* Phones - landscape */ 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 96dpi) { 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 144dpi) { 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) { 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) { 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 288dpi) { 

} 

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) and (min-resolution: 384dpi) { 

} 

/* Tablets - Portrait */ 

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 96dpi) { 

} 

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) and (min-resolution: 192dpi) { 

} 

/* Tablets - Landscape */ 

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 96dpi) { 

} 

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 192dpi) { 

} 

/* Desktop - Small */ 

@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 96dpi) { 

} 

@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-resolution: 192dpi) { 

} 

/* Desktop - Medium */ 

@media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 96dpi) { 

} 

@media only screen and (min-width: 1281px) and (max-width: 1366px) and (min-resolution: 192dpi) { 

} 

/* Desktop - Large */ 

@media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 96dpi) { 

} 

@media only screen and (min-width: 1367px) and (max-width: 1680px) and (min-resolution: 192dpi) { 

} 

/* Desktop - ExtraLarge */ 

@media only screen and (min-width: 1681px) and (min-resolution: 96dpi) { 

} 

@media only screen and (min-width: 1681px) and (min-resolution: 192dpi) { 

} 

Devrai-je utiliser ces 23 requêtes de médias? Est-ce que je vais mal quelque part?

Voici un échantillon de sortie désirée Responsive Site Layout

Answer 1

peut vous envoyer un lien vers le site ou un lien vers un jfiiddle avec votre code? ou éditez votre question et appuyez sur CTRL + M et collez tout votre code dans la boîte de snipet qui s'ouvre? Si vous utilisez le code Bootstrap, votre site sera adapté aux mobiles. Si vous codez vous-même utiliser ces http://codepen.io/mlegg10/pen/JKdOaj

/* 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 */ 
 
} 
 
/* iPhone 6 landscape */ 
 
@media only screen and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (orientation: landscape) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
{ } 
 

 
/* iPhone 6 portrait */ 
 
@media only screen 
 
    and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (orientation: portrait) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
{ } 
 

 
/* iPhone 6 Plus landscape */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (orientation: landscape) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
{ } 
 

 
/* iPhone 6 Plus portrait */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (orientation: portrait) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
{ } 
 

 
/* iPhone 6 and 6 Plus */ 
 
@media only screen 
 
    and (max-device-width: 640px), 
 
    only screen and (max-device-width: 667px), 
 
    only screen and (max-width: 480px) 
 
{ } 
 

 
/* Apple Watch */ 
 
@media 
 
    (max-device-width: 42mm) 
 
    and (min-device-width: 38mm) 
 
{ }