網站響應能力如何工作？

我使我的網站反應靈敏。檢查了許多不同的瀏覽器和手機。它工作正常。但問題是，當我檢查具有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

網站響應能力如何工作？

回答

相關問題