미디어 쿼리:데스크톱, 태블릿 및 모바일을 대상으로 하는 방법은 무엇입니까?

source

미디어 쿼리:데스크톱, 태블릿 및 모바일을 대상으로 하는 방법은 무엇입니까?

nicesource 2023. 6. 3. 08:31

미디어 쿼리:데스크톱, 태블릿 및 모바일을 대상으로 하는 방법은 무엇입니까?

저는 미디어 쿼리에 대해 조사를 해왔지만 특정 크기의 장치를 대상으로 하는 방법을 아직도 잘 이해하지 못합니다.

저는 데스크톱, 태블릿, 모바일을 목표로 할 수 있기를 원합니다.약간의 불일치가 있을 것이라는 것을 알지만 이러한 장치를 대상으로 사용할 수 있는 일반 시스템이 있으면 좋을 것입니다.

몇 가지 예를 찾았습니다.

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

실제로, 많은 디자이너들은 픽셀을 다음과 같이 변환합니다.em s, 주로때문에 때문에em더 나은 줌 기능을 제공합니다. 확대/축소 시 준축/소시확1em === 16px에 픽을곱을 .1em/16px갖기 위해em를 들면, 를들면예,320px === 20em.

댓글에 대해서는.min-width는 "모바일 우선" 설계의 표준으로, 가장 작은 화면을 위해 설계를 시작한 다음 점점 더 큰 화면으로 이동하면서 미디어 쿼리를 추가합니다.

.min-,max-여러 규칙이 동일한 요소와 일치하는 경우 이후 규칙이 이전 규칙보다 우선한다는 점을 염두에 두고 규칙 순서를 인식해야 합니다.

특정 장치나 크기를 대상으로 지정하지 마십시오!

일반적인 지혜는 특정 장치나 크기를 대상으로 하는 것이 아니라 '중단점'이라는 용어를 재구성하는 것입니다.

픽셀이 아닌 백분율 또는 em을 사용하여 모바일 사이트를 먼저 개발합니다.
그런 다음 더 큰 뷰포트에서 시도하고 실패하기 시작하는 부분을 기록합니다.
레이아웃을 재설계하고 CSS 미디어 쿼리를 추가하여 손상된 부품을 처리합니다.
다음 중단점에 도달할 때까지 이 과정을 반복합니다.

마크 드러먼드의 '중단점은 죽었다'에 있는 것처럼 responsivepx.com 를 사용하여 '자연스러운' 중단점을 찾을 수 있습니다.

자연 중단점 사용

그런 다음 '중단점'은 모바일 디자인이 '중단'되기 시작하는 실제 지점이 됩니다. 즉, 사용할 수 없거나 시각적으로 만족스러운 것이 사라집니다.잘 작동하는 모바일 사이트가 있으면 미디어 쿼리 없이도 특정 크기에 대한 걱정을 멈추고 연속적으로 더 큰 뷰포트를 처리하는 미디어 쿼리를 추가할 수 있습니다.

디자인을 정확한 화면 크기로 고정하려는 것이 아니라면 이 접근 방식은 특정 장치를 대상으로 할 필요가 없도록 함으로써 작동합니다.각 중단점에서 설계 자체의 무결성은 모든 크기에서 유지되도록 보장합니다.즉, 메뉴/콘텐츠 섹션/무엇이든 특정 크기에서 사용할 수 없게 되면 특정 장치 크기가 아닌 해당 크기에 대한 중단점을 설계해야 합니다.

행동 중단점에 대한 Lyza Gardner의 게시물과 Ethan Marcotte에 대한 Zeldman의 게시물, 그리고 웹 디자인이 초기 아이디어에서 얼마나 반응적으로 발전했는지를 참조하십시오.

의미 마크업 사용

또한, DOM 구조가 단순하고 의미론적일수록nav,header,main,section,footer등등 (같은 혐오스러운 것들을 포함합니다.div class="header"된 내부 이네스와 div태그) 응답성을 엔지니어링하는 것이 더 쉬울 것입니다. 특히 CSS 그리드 레이아웃(Sarah Drasner의 그리드 생성기는 이를 위한 훌륭한 도구임)과 RWD 설계 계획에 따라 배열하고 재주문할 수 있는 플렉스박스를 사용하여 플로트를 피하는 것이 더 쉬울 것입니다.

장치를 대상으로 지정하려면 다음과 같이 기록하십시오.min-device-width예:

아이폰용

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

태블릿용

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

다음은 몇 가지 좋은 기사입니다.

저는 이 사이트를 이용하여 해상도를 찾고 실제 숫자별로 CSS를 개발했습니다.제 번호는 위의 답변과 상당히 다릅니다. 단, my 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) {

    }

출처: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

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

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

초소형 장치(전화기, 최대 480px)
소형 장치(태블릿, 768px 이상)
중형 장치(대형 가로 태블릿, 랩톱 및 데스크톱, 992px 이상)
대형 장치(대형 데스크톱, 1200px 이상)
초상화 전자책 단말기(누크/킨들), 소형 태블릿 - 최소 너비: 481px
세로 태블릿, 세로 iPad, 가로 전자책 단말기 - 최소 너비:641px
태블릿, 가로 iPad, lo-res 노트북 - 최소 너비:961px
HTC 하나의 장치 너비: 360px 장치 높이: 640px - 웹킷 장치 - 픽셀 비율: 3
삼성 갤럭시S2 디바이스 폭: 320px 디바이스 높이: 534px - webkit - 디바이스 픽셀 비율: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5)
삼성 갤럭시S3 기기폭: 320px 기기높이: 640px - webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2) - 구형 파이어폭스 브라우저 (파이어폭스 16 이전) -
삼성 갤럭시S4 기기폭: 320px 기기높이: 640px - webkit-device-pixel ratio: 3
LG 넥서스4 디바이스 폭: 384px 디바이스 높이: 592px - webkit - 디바이스 픽셀 비율: 2
에이수스 넥서스 7 장치 너비: 601px 장치 높이: 906px -webkit-min-device-pixel-ratio: 1.331) 및 (-webkit-max-device-pixel-ratio: 1.332)
아이패드 1과 2, 아이패드 미니 장치 너비: 768px 장치 높이: 1024px - 웹킷 장치-픽셀 비율: 1
iPad 3 및 4 장치 너비: 768px 장치 높이: 1024px - webkit - 장치 - 픽셀 비율: 2)
아이폰 3G 장치 너비: 320px 장치 높이: 480px - webkit - 장치 픽셀 비율: 1)
아이폰4 디바이스 폭: 320px 디바이스 높이: 480px - webkit - 디바이스 픽셀 비율: 2)
아이폰5 장치 너비: 320px 장치 높이: 568px - webkit - 장치 픽셀 비율: 2)

이것은 아직 웹사이트에 '모바일 우선' 디자인을 하지 않고 빠른 임시 해결책을 찾고 있는 사람들만을 위한 것입니다.

휴대 전화용

@media (max-width:480px){}

태블릿용

@media (max-width:960px){}

노트북/데스크탑용

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

고해상도 노트북용

@media (max-width:1280px){}

요즘 가장 일반적인 것은 망막 스크린 장치, 즉 고해상도와 매우 높은 픽셀 밀도(일반적으로 물리적 크기는 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 웹사이트

화면 크기는 다양하기 때문에 항상 변경되고 항상 변경될 가능성이 높기 때문에 중단점과 미디어 쿼리를 설계에 기반하는 것이 가장 좋습니다.

이 작업을 수행하는 가장 쉬운 방법은 완성된 바탕 화면 디자인을 가져와 웹 브라우저에서 여는 것입니다.화면을 천천히 축소하여 좁힙니다.설계가 언제 시작되는지, "파손"되는지, 끔찍하고 비좁게 보이는지 관찰합니다.이때 미디어 쿼리를 사용한 중단점이 필요합니다.

데스크톱, 태블릿 및 전화기에 대한 세 가지 미디어 쿼리를 만드는 것이 일반적입니다.하지만 디자인이 세 가지 모두에서 잘 어울린다면, 필요하지 않은 세 가지 미디어 쿼리를 추가하는 복잡성을 감수해야 할 이유가 무엇입니까?필요에 따라 작업을 수행합니다!

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

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

단순하고 멋지군.


/* Mobile Devices */
@media (max-width: 480px) {
    foo > bar {
            
    }
}
        
/* Low resolution Tablets and iPads */
@media (min-width: 481px) and (max-width: 767px) {
    foo > bar {
        
    }
}
        
/* Tablets iPads (Portrait) */
@media (min-width: 768px) and (max-width: 1024px){
    foo > bar {
        
    }
}
    
/* Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
    foo > bar {
        
    }
}
    
/* Big boi Monitors */
@media (min-width: 1281px) {
    foo > bar {
        
    }
}

한 가지 추가 기능은 의 미디어 속성에서 미디어 쿼리를 사용할 수도 있다는 것입니다.<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 리소스를 다운로드합니다.차이점은 미디어 속성의 미디어 쿼리가 false로 평가되면 해당 .css 파일과 해당 콘텐츠가 렌더 차단되지 않는다는 것입니다.

따라서 의 미디어 속성을 사용하는 것이 좋습니다.<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

장치가 모바일인지 여부를 감지하는 것이 가장 좋은 해결책입니다.

@media (pointer:none), (pointer:coarse) {
}

초소형 장치 ~ 전화기(< 768px)
소형 기기 ~ 태블릿(>= 768대)
중간 규모 장치 - 데스크톱(>= 992개)
대형 장치 - 데스크톱(>= 1200대)

저는 제 일을 하기 위해 다음의 것을 사용하고 있습니다.

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

만약 당신이 더 구체적인 미디어 쿼리를 만들고 싶다면, 여기 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 링크에서 복사한 IPhone의 예가 있으며, 이 링크에서 더 많은 장치에 대한 미디어 쿼리를 찾을 수 있습니다.

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

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

}

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

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

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

}

바탕 화면에서 동작은 변경되지 않습니다.하지만 태블릿과 모바일에서는 큰 로고 이미지를 덮기 위해 탐색 모음을 확장합니다.참고: 로고 높이에 필요한 만큼 여백(위와 아래)을 사용합니다.

저의 경우 상하 60px가 완벽하게 작동했습니다!

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

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

$xs : "extra-small";
$s  : "small";
$m  : "medium";
$l  : "large";
$xl : "extra-large";

@mixin respond($breakpoint) {
  @if($breakpoint == $xs)  {
    @media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
  }
  @if($breakpoint == $s)  {
    @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
  }
  @if($breakpoint == $m)  {
    @media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @if($breakpoint == $l)  {
    @media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
  }
  @if($breakpoint == $xl)  {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

갤럭시 폴드와 같이 320px보다 작은 크기에 대해서도 하나를 더 추가할 수 있습니다.

해상도뿐만 아니라 장치의 DPR도 찾아야 합니다.
내 화면 해상도는 무엇입니까? "디바이스 픽셀 비율(DPR)은 장치 제조업체에서 지정한 숫자이며 HiDPI(인치당 높은 도트 수) 또는 Retina(애플의 상표) 디스플레이에 사용됩니다."

미디어 쿼리 예: (최소 해상도: 3.0dppx)

이 모든 것을 단순화하는 방법이 있습니다.

<500px: 's'수직 전화기

>500px: 'l'데스크톱, TV, 태블릿, 수평 모드의 전화기

참고: 제가 500을 선택한 이유는 바탕 화면 창 너비를 변경할 수 있는 가장 작은 것이 500이므로 더 큰 것은 바탕 화면이고 더 작은 것은 수직 모바일입니다.

데스크톱, TV, 태블릿 및 가로 전화 사이에는 항상 중복되므로 이러한 중단점을 사용하여 웹 사이트를 설계할 수 있습니다.디자인이 작은 데스크톱(예: 600px)에서 잘 어울린다면 나머지 장치에서도 잘 어울릴 것입니다.

중단점을 하나 더 추가하여 소형 데스크톱과 태블릿이 더 많은 공간으로 더 나은 디자인을 제공할 수 있습니다.

<500px: 's'수직 전화

500px - 1200px: 'm'소형 데스크톱, 태블릿, 수평형 전화기

>1200px: 'l'대형 데스크톱, 수평형 태블릿

미디어 쿼리:

/*<500px S*/
@media only screen and (max-width: 499px) { }

/*500-1200 M*/
@media only screen and (min-width: 500px) and (max-width: 1199px) { }

/*>1200px L*/
@media only screen and (min-width: 1200px) { }

@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

'source' 카테고리의 다른 글

원격 연결을 수신하기 위해 Linux에서 MongoDB 가져오기 (0)	2023.06.03
소수점 정밀도 및 척도(EF Code First) (0)	2023.06.03
UI WebView 내부에서 Javascript를 디버깅하는 방법에는 어떤 것이 있습니까? (0)	2023.06.03
루비에서 문자열의 0 또는 길이 == 0을 확인하는 더 좋은 방법이 있습니까? (0)	2023.06.03
어디에서나 애플리케이션 컨텍스트를 사용하고 계십니까? (0)	2023.06.03

현재글미디어 쿼리:데스크톱, 태블릿 및 모바일을 대상으로 하는 방법은 무엇입니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

JavaScript, mongoDB, Excel, Powershell, Java, CSS, angularjs, Git, Android, php, reactjs, Python, WordPress, MySQL, C, JSON, Spring-Boot, ASP.NET, oracle, MariaDB,

Today :
Yesterday :

nicesource

미디어 쿼리:데스크톱, 태블릿 및 모바일을 대상으로 하는 방법은 무엇입니까?

미디어 쿼리:데스크톱, 태블릿 및 모바일을 대상으로 하는 방법은 무엇입니까?

특정 장치나 크기를 대상으로 지정하지 마십시오!

자연 중단점 사용

의미 마크업 사용

아이폰용

태블릿용

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

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

미디어 쿼리:데스크톱, 태블릿 및 모바일을 대상으로 하는 방법은 무엇입니까?

미디어 쿼리:데스크톱, 태블릿 및 모바일을 대상으로 하는 방법은 무엇입니까?

특정 장치나 크기를 대상으로 지정하지 마십시오!

자연 중단점 사용

의미 마크업 사용

아이폰용

태블릿용

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

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바