网站响应是如何工作的？

Question

我已经使我的网站响应。查看了许多不同的浏览器和移动电话。效果很好。但问题是，当我检查最新的手机，有720x1280或更高的本地显示分辨率(屏幕大小5至5.5英寸)，我的网站没有显示在右侧，而是低于内容。下面是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;
 }
 }

我要留出320像素。因此，在百分比320/1220=27.27272727%。如果我放置160 am宽度的广告，那么只要最小屏幕大小为(160+20px填充)/680=26.47058823%(希望在此之前是正确的)，广告就会正确显示。但不起作用。我查了一下iPhone 6S，三星E5，旁白既没有出现在人像模式，也没有出现在景观模式中。在其他地方和页脚部分的上方，作为一个块放在一边。我理解这就是响应的全部意义，但我不明白的是:e5的分辨率是720x1280，而iPhone 6S的分辨率是750x1334。那么，为什么我的媒体查询不能适应它的位置呢？

是否对目标设备的屏幕分辨率或屏幕大小进行响应性网页设计？还是说不管设备的分辨率如何，都要一个接一个地放置？请帮我理解一下。

Answer 1

来自W3Schools

当您使用CSS和HTML来调整大小、隐藏、缩小、放大或移动内容以使其在任何屏幕上看起来良好时，就称为响应web设计。

问题是，一个像素是CSS不一定对应于屏幕上的物理像素，例如，有1334x750像素，但只有667x375用于CSS目的。后者是CSS所考虑的错误，这可能会导致您在使用错误的像素数进行计算时所面临的错误。

寻找CSS像素而不是普通像素。屏幕分辨率很重要，但对于响应web开发而言，像素的绝对数量并不重要。希望这会有所帮助:)