Programing

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

lottogame 2020. 2. 19. 21:20
반응형

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

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

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

내가 찾은 몇 가지 예 :

# 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-또는 이들의 조합, 여러 규칙이 동일한 요소를 일치하는 경우, 나중에 규칙이 이전 규칙을 무시 것을 염두에두고, 규칙의 순서를 인식합니다.

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

아이폰

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

정제 용

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

다음은 좋은 기사입니다.

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

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

  • 픽셀이 아닌 백분율 또는 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 입니다.

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

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

    @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 */
}
  1. 초소형 장치 (전화, 최대 480 픽셀)
  2. 소형 기기 (태블릿, 768 픽셀 이상)
  3. 중형 기기 (대형 태블릿, 노트북 및 데스크톱, 992px 이상)
  4. 대형 장치 (대형 데스크톱, 1200px 이상)
  5. 세로 형 전자 책 리더 (Nook / Kindle), 작은 태블릿-최소 너비 : 481px
  6. 세로 형 태블릿, 세로 형 iPad, 가로형 전자 책 리더-최소 너비 : 641px
  7. 태블릿, 가로 iPad, 고해상도 노트북-최소 너비 : 961px
  8. HTC 하나의 장치 너비 : 360px 장치 높이 : 640px -webkit-device-pixel-ratio : 3
  9. 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
  10. Samsung Galaxy S3 장치 너비 : 320px 장치 높이 : 640px -webkit-device-pixel-ratio : 2 (최소 --moz-device-pixel-ratio : 2),-이전 Firefox 브라우저 (Firefox 16 이전)-
  11. Samsung Galaxy S4 장치 너비 : 320px 장치 높이 : 640px -webkit-device-pixel-ratio : 3
  12. LG Nexus 4 기기 너비 : 384 픽셀 기기 높이 : 592 픽셀-웹킷 기기 픽셀 비율 : 2
  13. 아수스 넥서스 7 장치 너비 : 601px 장치 높이 : 906px -webkit-min-device-pixel-ratio : 1.331) 및 (-webkit-max-device-pixel-ratio : 1.332)
  14. iPad 1 및 2, iPad Mini 장치 너비 : 768px 장치 높이 : 1024px -webkit-device-pixel-ratio : 1
  15. iPad 3 및 4 장치 너비 : 768px 장치 높이 : 1024px -webkit-device-pixel-ratio : 2)
  16. iPhone 3G 장치 너비 : 320px 장치 높이 : 480px -webkit-device-pixel-ratio : 1)
  17. iPhone 4 장치 너비 : 320px 장치 높이 : 480px -webkit-device-pixel-ratio : 2)
  18. iPhone 5 장치 너비 : 320px 장치 높이 : 568px -webkit-device-pixel-ratio : 2)

픽셀 수의 문제가 아니라 화면의 실제 문자 크기 (mm 또는 인치)로 픽셀 밀도에 따라 다릅니다. 따라서 "최소 너비 :"및 "최대 너비 :"는 쓸모가 없습니다. 이 문제에 대한 자세한 설명은 다음과 같습니다. 장치 픽셀 비율은 정확히 무엇입니까?

"@media"쿼리는 픽셀 수와 장치 픽셀 비율을 고려하여 페이지를 디자인 할 때 실제로 고려해야 할 "가상 해상도"를 초래합니다. 글꼴이 10px 고정 너비이고 " 가상 가로 해상도 "는 300 픽셀이며 한 줄을 채우려면 30자가 필요합니다.

항상 변하는 화면 크기가 다양하고 가장 좋은 방법은 항상 변경되므로 디자인에 대한 중단 점 과 미디어 쿼리 를 기반으로하는 것입니다 .

가장 쉬운 방법은 완성 된 데스크탑 디자인을 잡고 웹 브라우저에서 여는 것입니다. 화면을 천천히 축소 하여 좁 힙니다. 디자인이 언제 시작 되거나 "깨지 거나 " 끔찍하고 좁아 보이는지 관찰하십시오 . 이 시점에서 미디어 쿼리의 중단 점이 필요합니다.

데스크톱, 태블릿 및 휴대 전화에 대해 3 가지 미디어 쿼리 세트를 만드는 것이 일반적입니다. 그러나 디자인이 세 가지 모두에 적합하다면 왜 필요하지 않은 세 가지 다른 미디어 쿼리를 추가하는 것이 복잡합니까? 필요에 따라 수행하십시오!

요즘 가장 일반적인 것은 망막 화면 장치, 즉 고해상도와 픽셀 밀도가 높은 장치 (일반적으로 물리적 크기가 6 인치보다 작은 장치)를 보는 것입니다. 그렇기 때문에 CSS에 특수한 미디어 쿼리를 표시하는 망막이 필요합니다. 이것은 내가 찾을 수있는 가장 완벽한 예입니다.

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  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 (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  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 (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

출처 : CSS-Tricks 웹 사이트

데스크탑에서는 동작이 변경되지 않습니다. 그러나 태블릿과 모바일에서는 큰 로고 이미지를 포함하도록 탐색 모음을 확장합니다. 참고 : 사용하여 여백 (위쪽과 아래쪽) 당신이 당신의 로고 높이에 필요한만큼을.

필자의 경우 60px 상단 및 하단이 완벽하게 작동했습니다! 

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

여기 에서 탐색 모음을 확인 하십시오 .

추가 기능 중 하나 는 태그 의 미디어 속성 에서 미디어 쿼리를 사용할 수도 있다는 것 <link>입니다.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

이를 통해 브라우저는 미디어 속성에 관계없이 모든 CSS 리소스를 다운로드 합니다. 차이점은 media 속성의 미디어 쿼리가 false 로 평가되면 해당 .css 파일과 그의 내용이 렌더링 차단되지 않는다는 것입니다.

따라서 더 나은 사용자 환경을 보장하기 위해 태그에 media 속성 을 사용하는 것이 좋습니다 <link>.

여기에서이 문제에 대한 Google 기사를 읽을 수 있습니다 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

미디어 쿼리에 따라 다른 파일에서 CSS 코드 분리를 자동화하는 데 도움이되는 몇 가지 도구

웹팩 https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

  • 초소형 장치 ~ 전화 (<768 픽셀)
  • 소형 기기 ~ 태블릿 (> = 768px)
  • 중형 기기 ~ 데스크톱 (> = 992px)
  • 대형 기기 ~ 데스크톱 (> = 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, 7, 8 ----------- */
@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+, 7+, 8+ ----------- */
@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 */
}

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

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

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* 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 */
}

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }

참고 URL : https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile



반응형

'Programing' 카테고리의 다른 글

&lt;와&gt;는 무엇을 의미합니까?  (0) 2020.02.19
ElasticSearch, Sphinx, Lucene, Solr, Xapian.  (0) 2020.02.19
클래스와 모듈의 차이점  (0) 2020.02.19
Vim에서 하나의 버퍼를 어떻게 닫습니까?  (0) 2020.02.19
Ubuntu에서 pip를 통해 python3 버전의 패키지를 설치하는 방법은 무엇입니까?  (0) 2020.02.19

'Programing'의 다른글

  • 현재글미디어 쿼리 : 데스크톱, 태블릿 및 모바일을 타겟팅하는 방법

관련글

댓글

티스토리툴바