미디어 쿼리와 함께 사용해야하는 장치/권장 크기는 어느 것입니까?

Question

저는 반응 형 웹 디자인에 익숙하지 않고 사용하려는 미디어 쿼리 및 대상 장치에 대한 다양한 환경 설정이 혼란 스럽습니다. 표준이 있습니까? iphone, ipads 및 인기있는 기기를 타겟팅하고 싶습니다. '나는 아이폰 시뮬레이터를 실행하고, CSS를 didn를하기 때문에 내가 아이폰 4를 대상으로하는 규칙을 모르는,

/* 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 */ 
} 

하지만 오래된 나도 몰라 :

나는 웹에서 이걸 발견했다 (마지막 CSS 규칙 참조) t 작업

감사

Answer 1

아메드 :

내 미디어 질의에 대한 생각은 귀하의 목표가 귀하의 웹 사이트를위한 장치 불가지론 적 프레임 워크를 만드는 것이어야한다는 것입니다. 즉, Apple (및 다른 업체)이 초 고해상도 스크린을 사용하면 해상도와 픽셀 밀도를 모두 인식해야합니다. 내가 그 이중의 임무를 달성에서 본 가장 좋은 조언은 크리스 Coyier의 CSS-tricks.com에서 오는

: 이 http://css-tricks.com/snippets/css/retina-display-media-query/

개념은 다음 크기에 따라 초기 브레이크 포인트를 생성하는 것입니다 픽셀 밀도가 미디어 쿼리가 이어집니다. 이 방법은 세 가지 중단 점을 제공하며 각 중단 점에는 픽셀 밀도 인식 옵션이 있습니다.

@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 */ 
} 

난 정말이 개념처럼 : 나이가 가능성이 대역폭 제한 장치 동안 대역폭을 절약 여기

이 Coyier의 샘플 코드입니다 (나는 당신이 개념을 이해할 수 있도록 공급 업체 특정 접두사를 단순화) 새로운 고해상도 장치에 필요한 것을 제공합니다. 픽셀 밀도 미디어 쿼리에 넣어야하는 유일한 코드는 배경 이미지입니다. 따라서 고해상도 이미지는 구형 장치의 픽셀 화 된 이미지를 덮어 씁니다.

움직이는 타겟을 치고 있음을 깨달으십시오.) 이것은 진화하는 개념이며, css-tricks.com, stackoverflow 및 기타 블로그가 계속 유지하는 가장 좋은 방법 인 것 같습니다. 행운을 빕니다.

Answer 2

레이아웃에서 "중단 점"다른 뷰포트 비율이 새로운 장치가 시장에 와서 빠르게 구식이 될 가능성이 높다. 특정 장치를 대상으로 지정하는 것보다는 특정 장치에 디자인을 구부리지 않고 중단하려는 곳에서 중단 점을 갖는 방식을 선호합니다. agnostic responsive web design은 내가 할 수있는 것보다 더 잘 설명합니다.

양자 택일로, 당신은 320 and up 또는 Twitter Bootstrap 같은 가장 인기있는 프레임 워크의 일부를 참조 할 수 - 그들은 매우 자주 업데이트하고 미디어 쿼리와 함께 좋은 출발점을 제공해야 중단 점