网站响应如何运作？

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

我希望 Aside 为 320 像素。因此，百分比为 320/1220=27.27272727%。如果我放置 160px 宽度的广告，那么只要最小屏幕尺寸为 (160+20px padding)/680=26.47058823%，广告就会正常显示（我希望到目前为止我是正确的）。但它不起作用。我检查了 iPhone 6S、Samsung E5，Aside 在纵向或横向模式下均未显示。 Aside 作为一个块位于其他所有内容下方和页脚部分上方。我明白这就是响应能力的全部意义所在，但我不明白的是：E5 的分辨率是 720x1280，而 iPhone 6s 的分辨率是 750x1334。那么，为什么我的媒体查询无法在其位置容纳 aside？

响应式网页设计是否与目标设备的屏幕分辨率或屏幕尺寸有关？还是不管设备的分辨率如何，一个接一个地放置方块？请帮助我理解。

Answer 1

来自 W3School

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen

问题是一个像素CSS不一定对应屏幕上的物理像素，例如，有1334x750像素但只有667x375用于CSS目的。后者是 CSS 考虑的那个，这可能会导致您遇到错误，因为使用了错误的像素数来计算。

寻找 CSS 像素，而不仅仅是常规像素。屏幕分辨率很重要，但与响应式 Web 开发的像素绝对数量无关。希望这会有所帮助:)

网站响应如何运作？

How does Website responsiveness work?

html

css

mobile-website

responsiveness