使用css的網站響應式設計

Question

我正在爲一些必須響應的網站寫css。我是新來的CSS和不知道很多的響應技術。我已將我的css代碼分爲三部分。

1. 桌面：所有通用樣式，
2. 片：@media（最小寬度：768px）和（最大寬度：991px）{我的風格}
3. 手機：@media（最小寬度：320像素）和（最大寬度：480像素）{我的風格}

會不會是充分響應和支持所有標準的設備或做我必須做一些更多的變化？這裏全部意味着字面上所有設備。

Answer 1

列表中你必須不能離開481和766之間，並在0至319像素的空間。 這不是真正的響應。

@media screen and (max-device-width:480px){ // styles for mobile} 
@media screen and (max-device-width:780px){ // styles for tablets} 
@media screen and (min-device-width:781px){ // styles for desktop} 

編輯有身打扮比319像素低。例如：

/* ----------- Moto 360 Watch ----------- */ 
@media 
    (max-device-width: 218px) 
    and (max-device-height: 281px) { 

} 

應該有有481和766

Answer 2

如果你認爲迴應的簡單，我爲你的兒子感到難過。我們有99個視口，但iPhone只有一個。

這裏是Media Queries for Standard Devices

Answer 3

之間的一些設備是什麼幾乎每個人都得到了錯誤的是，響應式設計應基於一些預定義的斷點來完成。它應該定義你的內容，而不是你的訪客的屏幕。如果有10個斷點，則網站結構肯定有問題。較少的媒體查詢=更好。從那裏開始，爲您的內容完成任何屏幕的完美結構。