[css] 미디어 쿼리 : 데스크톱, 태블릿 및 모바일을 타겟팅하는 방법

미디어 쿼리에 대한 조사를 해왔으며 특정 크기의 기기를 타겟팅하는 방법을 여전히 이해하지 못합니다.

데스크톱, 태블릿 및 모바일을 타겟팅 할 수 있기를 원합니다. 불일치가 있음을 알고 있지만 이러한 장치를 타겟팅하는 데 사용할 수있는 일반 시스템을 사용하는 것이 좋습니다.

내가 찾은 몇 가지 예 :

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

또는:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

각 장치의 중단 점은 무엇입니까?

답변

IMO는 최고의 중단 점입니다.

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

편집 : 960 그리드로 더 잘 작동하도록 개선되었습니다.

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

실제로 많은 디자이너들이 픽셀을 ems로 변환하고, 크게 b / c em은 줌을 더 잘 감당할 수 있습니다. 표준 줌에서 1em === 16px. 1em/16pxem을 얻으려면 픽셀을 곱하십시오 . 예를 들면 다음과 같습니다 320px === 20em.

이 의견에 대한 답변 min-width은 “모바일 우선”디자인의 표준으로, 가장 작은 화면을 디자인 한 다음 점점 증가하는 미디어 쿼리를 추가하여 더 큰 화면으로 진행합니다. 에 관계없이 당신이 선호 여부 min-, max-또는 이들의 조합, 여러 규칙이 동일한 요소를 일치하는 경우, 나중에 규칙이 이전 규칙을 무시 것을 염두에두고, 규칙의 순서를 인식합니다.

답변

특정 기기 나 크기를 타겟팅하지 마십시오!

일반적인 지혜는 것입니다 특정 장치 또는 크기를 대상으로하지 만, 용어 ‘중단’을 재구성하기 :

픽셀이 아닌 백분율 또는 em을 사용하여 모바일 사이트를 먼저 개발하고 ,
더 큰 뷰포트에서 시도하고 실패하기 시작하는 위치를 기록하십시오.
깨진 부분을 처리하기 위해 레이아웃을 다시 디자인하고 CSS 미디어 쿼리를 추가하십시오.
다음 중단 점에 도달 할 때까지 프로세스를 반복하십시오.

Marc Drummond의 ‘breakpoints dead’ 에서와 같이 responsivepx.com 을 사용 하여 ‘natural’중단 점을 찾을 수 있습니다 .

자연스러운 중단 점 사용

그런 다음 ‘중단 점’ 은 모바일 디자인이 ‘중단’되기 시작 하는 실제 지점이됩니다. 즉 사용 가능하거나 시각적으로 만족스럽지 않습니다. 미디어 쿼리없이 제대로 작동하는 모바일 사이트를 구축 한 후에는 특정 크기에 대해 걱정하지 않고 연속적으로 더 큰 뷰포트를 처리하는 미디어 쿼리를 추가 할 수 있습니다.

디자인을 정확한 화면 크기로 고정하지 않으려는 경우 특정 장치를 대상으로하지 않아도됩니다 . 각 중단 점에서 디자인 자체 의 무결성은 모든 크기에서 유지되도록합니다. 즉, 소정의 크기로되는 정지 가능한 어떤 메뉴 / 콘텐츠 섹션 / 경우 그 크기에 대한 중단을 설계 , 아니 특정 디바이스 크기.

행동 중단 점 에 대한 Lyza Gardner의 게시물 과 Ethan Marcotte에 대한 Zeldman의 게시물과 반응 형 웹 디자인이 intitial idea에서 어떻게 진화했는지 를 참조하십시오.

시맨틱 마크 업 사용

또한, 단순하고 의미 DOM 구조 와 함께 nav, header, main, section, footer등 (같은 가증을 피하는 div class="header"중첩 된 내부와 div태그) 쉬워 특히 사용하여 수레를 피하고, 엔지니어 응답하는 것입니다 CSS 그리드 레이아웃을 사라 Drasner의 ( 그리드 발생기 입니다 RWD 디자인 계획에 따라 정렬 및 재정렬을위한 flexbox ) 및 flexbox 입니다.

답변

장치를 대상으로하려면을 쓰십시오 min-device-width. 예를 들면 다음과 같습니다.

아이폰

@media only screen and (min-device-width: 480px){}

정제 용

@media only screen and (min-device-width: 768px){}

다음은 좋은 기사입니다.

답변

나는이 사이트 를 사용 하여 해상도를 찾고 실제 숫자 당 CSS를 개발했습니다. 내 CSS는 실제로 원하는 장치에 충돌한다는 점을 제외하면 위의 답변과는 상당히 다릅니다.

또한 미디어 쿼리 직후에 다음과 같은 디버깅 코드를 작성하십시오.

@media only screen and (min-width: 769px) and (max-width: 1281px) { 
  /* for 10 inches tablet screens */
  body::before {
    content: "tablet to some desktop media query (769 > 1281) fired";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }
}

모든 단일 미디어 쿼리에이 디버깅 항목을 추가하면 어떤 쿼리가 적용되는지 확인할 수 있습니다.

답변

Twitter Bootstrap이 권장하는 최고의 중단 점

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

답변

일반적인 장치 중단 점에 대한 미디어 쿼리

/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

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

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

답변

초소형 장치 (전화, 최대 480 픽셀)
소형 기기 (태블릿, 768 픽셀 이상)
중형 기기 (대형 태블릿, 노트북 및 데스크톱, 992px 이상)
대형 장치 (대형 데스크톱, 1200px 이상)
세로 형 전자 책 리더 (Nook / Kindle), 작은 태블릿-최소 너비 : 481px
세로 형 태블릿, 세로 형 iPad, 가로형 전자 책 리더-최소 너비 : 641px
태블릿, 가로 iPad, 고해상도 노트북-최소 너비 : 961px
HTC 하나의 장치 너비 : 360px 장치 높이 : 640px -webkit-device-pixel-ratio : 3
Samsung Galaxy S2 장치 너비 : 320px 장치 높이 : 534px -webkit-device-pixel-ratio : 1.5 (최소 -moz-device-pixel-ratio : 1.5), (-o-min-device-pixel-ratio : 3/2), (최소 장치 픽셀 비율 : 1.5
Samsung Galaxy S3 장치 너비 : 320px 장치 높이 : 640px -webkit-device-pixel-ratio : 2 (최소 –moz-device-pixel-ratio : 2),-이전 Firefox 브라우저 (Firefox 16 이전)-
Samsung Galaxy S4 장치 너비 : 320px 장치 높이 : 640px -webkit-device-pixel-ratio : 3
LG Nexus 4 기기 너비 : 384 픽셀 기기 높이 : 592 픽셀-웹킷 기기 기기 픽셀 비율 : 2
아수스 넥서스 7 장치 너비 : 601px 장치 높이 : 906px-웹킷-최소-장치-픽셀 비율 : 1.331) 및 (-웹킷-최대-장치-픽셀 비율 : 1.332)
iPad 1 및 2, iPad Mini 장치 너비 : 768px 장치 높이 : 1024px -webkit-device-pixel-ratio : 1
iPad 3 및 4 장치 너비 : 768px 장치 높이 : 1024px -webkit-device-pixel-ratio : 2)
iPhone 3G 장치 너비 : 320px 장치 높이 : 480px -webkit-device-pixel-ratio : 1)
iPhone 4 장치 너비 : 320px 장치 높이 : 480px -webkit-device-pixel-ratio : 2)
iPhone 5 장치 너비 : 320px 장치 높이 : 568px -webkit-device-pixel-ratio : 2)