Comment fonctionne la réactivité du site Web?

Question

J'ai rendu mon site Web réactif. Vérifié sur de nombreux navigateurs et téléphones mobiles. Ça fonctionne bien. Mais le problème est, quand je vérifie sur les derniers téléphones mobiles qui ont 720x1280 ou une meilleure résolution d'affichage natif (taille d'écran de 5 à 5,5 pouces), mon site ne s'affiche pas à droite, il va plutôt au-dessous du contenu de. Voici le code CSS:

@media all and (min-width: 680px) { 
.container { 
max-width: 1220px; 
text-align:left; 
background:#FFF; 
overflow:hidden; 
position:relative; 
box-shadow: 0px 2px 5px 0px #888888; 
margin: 0 auto; 
} 
section { 
float: left; 
width: 67.21311475%; 
padding-left:1.63934426%; 
padding-right:1.63934426%; 
padding-top:15px; 
padding-bottom:15px; 
background:#FFF; 
position:relative; 
} 
aside { 
float: right; 
width: 26.22950819%; 
padding-left:1.63934426%; 
padding-right:1.63934426%; 
padding-top:15px; 
padding-bottom:15px; 
background:#F9F9F9; 
position:relative; 
} 
} 

Je veux Aside être 320 pixels. Ainsi, en pourcentage 320/1220 = 27,27272727%. Si je mets 160px largeur annonces alors l'annonce sera correctement montrer tant que la taille de l'écran est min (160 + 20px rembourrage) /680=26.47058823% (J'espère que je suis correct jusqu'à ce point). Mais ça ne marche pas. J'ai vérifié sur l'iPhone 6S, Samsung E5, et l'Aside ne s'affiche pas en mode portrait ou paysage. A part ça se passe comme un bloc sous tout le reste et au-dessus de la section footer. Je comprends que c'est tout le sens de la réactivité, mais ce que je ne comprends pas est la suivante: la résolution d'E5 est de 720x1280 alors que la résolution de l'iPhone 6s est de 750x1334. Alors, pourquoi ma requête de médias ne fonctionne pas pour accueillir le côté à sa place?

Le webdesign est-il adapté à la résolution d'écran ou à la taille d'écran des appareils ciblés? Ou s'agit-il de placer un bloc après l'autre, quelle que soit la résolution de l'appareil? S'il vous plaît aidez-moi à comprendre.

Answer 1

De W3Schools

Il est appelé réactif web design lorsque vous utilisez CSS et HTML pour redimensionner, cacher, rétrécir, agrandir ou déplacer le contenu pour le faire paraître bien sur un écran

Le problème est qu'un pixel est CSS ne correspond pas nécessairement à un pixel physique sur l'écran, par exemple, a 1334x750 pixels, mais seulement 667x375 à des fins de CSS. Ce dernier est celui que CSS considère, ce qui pourrait être à l'origine de l'erreur que vous rencontrez car le mauvais nombre de pixels est utilisé pour calculer.

Recherchez plutôt les pixels CSS au lieu des simples pixels. La résolution d'écran est importante, mais pas le nombre absolu de pixels pour le développement web réactif. Espérons que cela aide :)