我應該通過媒體查詢來定位哪些設備/建議尺寸？

我是新興的響應式網頁設計，並且很困惑，有關於使用哪些媒體查詢和設備來定位的各種偏好。有沒有標準？我想定位iphone，ipad和流行的設備？我應該通過媒體查詢來定位哪些設備/建議尺寸？

我發現這個網站：

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 and high pixel ratio devices ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
}

但我不知道這是否是過時的，我不知道是哪個規則針對iPhone 4因爲我跑的iPhone模擬器和CSS沒」牛逼的工作（指最後的CSS規則）

感謝

來源

2012-10-20 Ahmed Fouad

艾哈邁德：

我與媒體查詢一起思考的是，您的目標應該是爲您的網站制定一個設備不可知的框架。這意味着它需要兼顧分辨率和像素密度，因爲蘋果（和其他公司）推入超高分辨率屏幕。

我已經看到了實現這一雙重使命的最好的建議來自克里斯Coyier的CSS-tricks.com： http://css-tricks.com/snippets/css/retina-display-media-query/

的理念是創建基於大小的初始破發點，然後有像素密度媒體查詢如下。這種方法給你三個斷點，每個斷點都有一個像素密度感知選項。

這裏是Coyier的示例代碼（我簡化了供應商特定的前綴，這樣可以抓住的概念）：

@media only screen and (min-width: 320px) { 
    /* Small screen, non-retina */ 
} 

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) { 
    /* Small screen, retina, stuff to override above media query */ 
} 

@media only screen and (min-width: 700px) { 
    /* Medium screen, non-retina */ 
} 

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) { 
    /* Medium screen, retina, stuff to override above media query */ 
} 

@media only screen and (min-width: 1300px) { 
    /* Large screen, non-retina */ 
} 

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){ 
    /* Large screen, retina, stuff to override above media query */ 
}

我真的很喜歡這個概念：節省帶寬資源爲老年人，可能帶寬受限的設備，而給新的，高分辨率的設備提供他們需要的東西。您必須在像素密度媒體查詢中添加的唯一代碼應該是背景圖像，因此較高分辨率的圖像會覆蓋較舊設備上的像素對應圖像。

意識到你正試圖擊中一個移動的目標我的朋友;）這是一個不斷髮展的概念，css-tricks.com，stackoverflow和其他博客似乎是最好的方式來跟上。祝你好運。

來源

2012-10-20 16:55:26 staypuftman

的「斷點」，在你的佈局都可能成爲迅速過時與不同的視口比新設備進入市場。也許而不是針對特定設備，我更喜歡在設計中讓斷點破碎的方法，而不是將設計彎曲到特定設備。

這篇文章：agnostic responsive web design解釋它比我做得更好。

或者，你可以參考一些像320 and up或Twitter Bootstrap最流行的框架 - 它們經常更新，並應爲您提供一個良好的起點與媒體查詢斷點

來源

2012-10-20 09:36:15 Luca

我應該通過媒體查詢來定位哪些設備/建議尺寸？

回答

相關問題