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

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

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

내가 찾은 몇 가지 예 :

# 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){}

다음은 좋은 기사입니다.

• Apple iPad에 맞게 웹 사이트를 맞추는 방법
• CSS3 미디어 쿼리

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-웹킷-최소-장치-픽셀 비율 : 1.331) 및 (-웹킷-최대-장치-픽셀 비율 : 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자가 필요합니다.

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

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

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

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

추가 기능 중 하나 는 태그 의 미디어 속성 에서 미디어 쿼리를 사용할 수도 있다는 것 <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

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

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

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

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

• 초소형 장치 ~ 전화 (<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

    }