響應式設計的移動和桌面

有幾件事情我不能讓我的頭左右，響應式設計的移動和桌面

手機這些天有一個分辨率桌面monitions一樣好。在構建響應式網站時，您可以使用媒體查詢並使流暢性變得更好這些媒體查詢基於屏幕大小（以像素爲單位）。所以說，我做了一個響應式網站，並設計它爲480px，800px和1080px。當我在桌面瀏覽器中查看它時，我會查看1080px，但是當我在高端移動設備中查看它時，我也會查看1080px。爲什麼我們使用像素，如果它與屏幕尺寸沒有真正的關係？

但是，如果你使用視口元標籤它如何排序這個問題。有人可以解釋如何使用響應式設計相對於像素，即使知道像素不確定屏幕的大小？以及視口標籤或其他作品如何？

來源

2013-12-21 Jack Trowbridge

移動瀏覽器在比手機屏幕更大的視圖中加載網站，比方說640 x 320，我們稱之爲視口。如果手機的屏幕實際上具有320 x 160像素的尺寸，則手機會向用戶顯示一半的網站（典型用於非移動優化網站）。電話用戶必須放大或滾動才能看到另一半。

如果開發人員構建移動網站，他希望視口等於屏幕。他可以通過設置<meta name="viewport" width="device-width">來獲得。這意味着在此示例中，移動瀏覽器在320 x 160的視圖中加載網站。

以上將允許移動網站開發人員構建適合手機屏幕的網站。例如，如果您的屏幕小於321像素，則會隱藏邊欄。他可能會使用媒體查詢：@media (max-width:320px){#sidebar{display:none;}}。這隻有在網站加載寬度爲320px的視口時纔有效。如果沒有<meta name="viewport" width="device-width">或<meta name="viewport" width="320px">，即使用戶放大，導致它加載到640像素寬度的屏幕中，菜單也應該可見。

enter image description here

你可以閱讀更多關於這一切的：http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

來源

2013-12-21 22:47:59

該像素不是一個像素是我的收藏之一。在所有媒體查詢中使用ems，生活變得更加簡單 – Christina

響應式設計的移動和桌面

回答

相關問題