网站响应能力如何工作？

我使我的网站反应灵敏。检查了许多不同的浏览器和手机。它工作正常。但问题是，当我检查具有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％。如果我放置160px宽度的广告，那么只要最小屏幕尺寸是（160 + 20px填充）/680=26.47058823%（我希望我是正确的，直到这一点）才能正确显示广告。但它不起作用。我检查了iPhone 6S，三星E5，并且Aside不以纵向或横向模式显示。 Aside在其他所有内容和页脚部分之上都是块。我明白这就是响应能力的全部，但我不明白的是：E5的分辨率是720x1280，而iPhone 6s的分辨率是750x1334。那么，为什么我的媒体查询不能适应旁边的地方呢？

响应式网页设计是关于目标设备的屏幕分辨率还是屏幕尺寸？或者，无论设备的分辨率是多少，都要将一个接一个的块放在另一个块上？请帮助我理解。

来源

2017-09-06 Sudin

遗漏单词'Aside section'， – Sudin

嗨，回答网站响应性的部分，我认为它更像是关于像素方面的屏幕大小。有人纠正我，如果我错了，但1 CSS像素不完全是在屏幕上的一个像素，为CSS的目的iPhone6的尺寸为375x667（改用这些值） – chngzm

谢谢，但你能告诉我关于尺寸单位？我的意思是375x667是什么？如果它不是像素那么它是什么？另外，我可以在哪里获得有关不同手机的尺寸信息？ – Sudin

从W3Schools的

当你使用CSS和HTML它被称为响应的网页设计改变大小，隐藏，缩小，放大，或移动内容，使它看起来不错过任何屏幕上

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

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

来源

2017-09-06 06:50:49 chngzm

谢谢chngzm – Sudin

https：/ /stackoverflow.com/help/someone-answers如果你可以接受我的答案，那将是很好的 – chngzm

是的，不知道这一点。但是，我在这里发现了一大堆与手机CSS设备无关的像素数。感谢您的回答和提示。该列表可能对像我这样的人很有帮助，所以我在这里分享它：https://mydevice.io/devices/ – Sudin

网站响应能力如何工作？

回答

相关问题