Wie funktioniert die Website-Reaktionsfähigkeit?

Question

Ich habe meine Website ansprechend gemacht. Überprüft auf vielen verschiedenen Browsern und Mobiltelefonen. Es funktioniert gut. Aber das Problem ist, wenn ich auf die neuesten Handys, die 720x1280 oder besser native Display-Auflösung (Bildschirmgröße 5 bis 5,5 Zoll) haben überprüfen, meine Website ist nicht auf der rechten Seite angezeigt, es geht eher unter den Inhalt von. Hier ist der CSS-Code:

@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; 
} 
} 

Ich möchte neben 320 Pixel sein. Also, in Prozent 320/1220 = 27,27272727%. Wenn ich Anzeigen mit einer Breite von 160px platziere, wird die Anzeige korrekt angezeigt, solange die minimale Bildschirmgröße (160 + 20px Padding) /680 = 26,47058823% ist (ich hoffe, dass ich bis zu diesem Punkt richtig bin). Aber es funktioniert nicht. Ich habe auf dem iPhone 6S, Samsung E5 überprüft, und die Seite erscheint nicht im Hoch- oder Querformat. Beides geht als Block unter alles und über den Fußbereich. Ich verstehe, dass das der ganze Punkt der Reaktionsfähigkeit ist, aber was ich nicht verstehe, ist dies: Die Auflösung von E5 ist 720x1280, während die Auflösung von iPhone 6s 750x1334 ist. Also, warum meine Medienanfrage nicht arbeitet, um das beiseite an seinem Platz unterzubringen?

Reagiert Webdesign auf Bildschirmauflösung oder Bildschirmgröße der Zielgeräte? Oder geht es darum, einen Block nach dem anderen zu platzieren, egal wie hoch die Auflösung des Gerätes ist? Bitte hilf mir zu verstehen.

Answer 1

Von W3Schools

Es Responsive Webdesign wird aufgerufen, wenn Sie CSS und HTML verwenden, um die Größe, verstecken, schrumpfen, vergrößern, oder den Inhalt bewegen, um es auf jedem Bildschirm gut aussehen

Das Problem ist, dass ein Pixel CSS nicht unbedingt einem physischen Pixel auf dem Bildschirm entspricht, zum Beispiel hat 1334x750 Pixel aber nur 667x375 für CSS-Zwecke. Letzteres ist das, was CSS in Betracht zieht, was zu dem Fehler führen könnte, dem Sie gegenüberstehen, da die falsche Anzahl von Pixeln zur Berechnung verwendet wird.

Suchen Sie stattdessen nach den CSS-Pixeln statt nur nach regulären Pixeln. Entscheidend ist die Bildschirmauflösung, nicht aber die absolute Anzahl der Pixel für die responsive Webentwicklung. Hoffe, das hilft :)