Truy vấn phương tiện: Làm thế nào để nhắm mục tiêu máy tính để bàn, máy tính bảng và điện thoại di động?

Tôi đã thực hiện một số nghiên cứu về truy vấn phương tiện và tôi vẫn chưa hiểu cách nhắm mục tiêu các thiết bị có kích thước nhất định.

Tôi muốn có thể nhắm mục tiêu máy tính để bàn, máy tính bảng và điện thoại di động. Tôi biết rằng sẽ có một số khác biệt nhưng thật tuyệt khi có một hệ thống chung có thể được sử dụng để nhắm mục tiêu các thiết bị này.

Một số ví dụ tôi đã tìm thấy:

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

Hoặc là:

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

Điểm dừng nên là gì cho mỗi thiết bị?

IMO đây là những điểm dừng tốt nhất:

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

Chỉnh sửa : Được tinh chỉnh để hoạt động tốt hơn với 960 lưới:

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

Trong thực tế, nhiều nhà thiết kế chuyển đổi pixel thành ems, phần lớn là khả năng thu phóng tốt hơn. Ở mức thu phóng tiêu chuẩn 1em === 16px. Nhân lên nhiều pixel 1em/16pxđể có được. Ví dụ , 320px === 20em.

Đáp lại bình luận, min-widthlà tiêu chuẩn trong thiết kế "đầu tiên trên thiết bị di động", trong đó bạn bắt đầu bằng cách thiết kế cho màn hình nhỏ nhất của mình, sau đó thêm các truy vấn phương tiện ngày càng tăng, làm việc theo cách của bạn lên màn hình lớn hơn và lớn hơn. Bất kể bạn thích min-, max-hoặc kết hợp chúng, hãy nhận thức theo thứ tự các quy tắc của bạn, hãy nhớ rằng nếu nhiều quy tắc khớp với cùng một yếu tố, các quy tắc sau sẽ ghi đè lên các quy tắc trước đó.

Không nhắm mục tiêu các thiết bị hoặc kích thước cụ thể!

Sự khôn ngoan chung không phải là nhắm mục tiêu các thiết bị hoặc kích thước cụ thể , mà là điều chỉnh lại thuật ngữ 'điểm dừng':

• phát triển trang web cho thiết bị di động trước bằng cách sử dụng tỷ lệ phần trăm hoặc phần mềm, không phải pixel,
• sau đó thử nó trong một khung nhìn lớn hơn và lưu ý nơi nó bắt đầu thất bại,
• thiết kế lại bố cục và thêm truy vấn phương tiện CSS chỉ để xử lý các phần bị hỏng,
• lặp lại quá trình cho đến khi bạn đạt đến điểm dừng tiếp theo.

Bạn có thể sử dụng responsivepx.com để tìm các điểm dừng 'tự nhiên', như trong 'điểm dừng đã chết' của Marc Drumond .

Sử dụng điểm dừng tự nhiên

Các 'điểm dừng' sau đó trở thành điểm thực tế mà tại đó thiết kế di động của bạn bắt đầu 'phá vỡ', tức là không còn có thể sử dụng được hoặc trực quan. Khi bạn có một trang web di động hoạt động tốt, không có truy vấn phương tiện, bạn có thể ngừng quan tâm đến kích thước cụ thể và chỉ cần thêm truy vấn phương tiện xử lý các chế độ xem lớn hơn liên tiếp.

Nếu bạn không cố gắng ghim một thiết kế vào một kích thước màn hình chính xác, phương pháp này hoạt động bằng cách loại bỏ nhu cầu nhắm mục tiêu các thiết bị cụ thể . Tính toàn vẹn của chính thiết kế tại mỗi điểm dừng đảm bảo rằng nó sẽ giữ ở bất kỳ kích thước nào. Nói cách khác, nếu một phần menu / phần nội dung / bất cứ thứ gì dừng lại có thể sử dụng được ở một kích thước nhất định, hãy thiết kế một điểm dừng cho kích thước đó , không phải cho một kích thước thiết bị cụ thể.

Xem bài đăng của Lyza Gardner về các điểm dừng hành vi , và bài đăng của Zeldman về Ethan Marcotte và cách thiết kế web đáp ứng phát triển từ ý tưởng sâu sắc.

Sử dụng đánh dấu ngữ nghĩa

Hơn nữa, đơn giản hơn và nhiều ngữ nghĩa cấu trúc DOM với nav, header, main, section, footervv (tránh gớm ghiếc như div class="header"với bên trong lồng nhau divtags) dễ dàng hơn nó sẽ được để kỹ sư đáp ứng, đặc biệt là tránh nổi bằng cách sử dụng CSS Lưới Layout (Sarah Drasner của máy phát điện lưới là một công cụ tuyệt vời cho việc này) và flexbox để sắp xếp và đặt hàng lại theo kế hoạch thiết kế RWD của bạn.

Nếu bạn muốn nhắm mục tiêu một thiết bị thì chỉ cần viết min-device-width . Ví dụ:

Dành cho iPhone

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

Đối với máy tính bảng

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

Dưới đây là một số bài viết hay:

• Làm cách nào để vừa trang web của bạn cho Apple iPad
• Truy vấn phương tiện CSS3

1. Tôi đã sử dụng trang web này để tìm độ phân giải và phát triển CSS theo số thực tế. Số của tôi thay đổi khá nhiều so với các câu trả lời ở trên, ngoại trừ việc CSS của tôi thực sự đạt được các thiết bị mong muốn.

2. Ngoài ra, có đoạn mã gỡ lỗi này ngay sau truy vấn phương tiện của bạn, vd:

   @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;
     }
   } 

   Thêm mục gỡ lỗi này trong mỗi truy vấn phương tiện duy nhất và bạn sẽ thấy truy vấn nào đang được áp dụng.

Các điểm dừng tốt nhất được đề xuất bởi 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) {

    }

Truy vấn phương tiện cho các điểm dừng thiết bị phổ biến

/* 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. Thêm thiết bị nhỏ (điện thoại, tối đa 480px)
2. Thiết bị nhỏ (máy tính bảng, 768px trở lên)
3. Các thiết bị trung bình (máy tính bảng cỡ lớn, máy tính xách tay và máy tính để bàn, 992px trở lên)
4. Thiết bị lớn (máy tính để bàn lớn, 1200px trở lên)
5. máy đọc sách điện tử chân dung (Nook / Kindle), máy tính bảng nhỏ hơn - min-width: 481px
6. máy tính bảng chân dung, iPad chân dung, máy đọc sách điện tử ngang - chiều rộng tối thiểu: 641px
7. máy tính bảng, iPad phong cảnh, máy tính xách tay lo-res - min-width: 961px
8. Chiều rộng thiết bị HTC One: chiều cao thiết bị 360px: 640px -webkit-device-pixel-ratio: 3
9. Chiều rộng thiết bị Samsung Galaxy S2: 320px chiều cao thiết bị: 534px -webkit-device-pixel-ratio: 1.5 (min - moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (tỷ lệ min-thiết bị-pixel: 1,5
10. Chiều rộng thiết bị Samsung Galaxy S3: 320px chiều cao thiết bị: 640px -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - Các trình duyệt Firefox cũ hơn (trước Firefox 16) -
11. Chiều rộng thiết bị Samsung Galaxy S4: chiều cao thiết bị 320px: 640px -webkit-device-pixel-ratio: 3
12. Chiều rộng thiết bị LG Nexus 4: chiều cao thiết bị 384px: 592px -webkit-device-pixel-ratio: 2
13. Asus Nexus 7 chiều rộng thiết bị: 601px chiều cao thiết bị: 906px -webkit-min-device-pixel-ratio: 1.331) và (-webkit-max-device-pixel-ratio: 1.332)
14. iPad 1 và 2, iPad Mini chiều rộng thiết bị: 768px chiều cao thiết bị: 1024px -webkit-device-pixel-ratio: 1
15. iPad 3 và 4 chiều rộng thiết bị: 768px chiều cao thiết bị: 1024px -webkit-device-pixel-ratio: 2)
16. Chiều rộng thiết bị iPhone 3G: chiều cao thiết bị 320px: 480px -webkit-device-pixel-ratio: 1)
17. chiều rộng thiết bị iPhone 4: chiều cao thiết bị 320px: 480px -webkit-device-pixel-ratio: 2)
18. Chiều rộng thiết bị iPhone 5: chiều cao thiết bị 320px: 568px -webkit-device-pixel-ratio: 2)

Đây không phải là vấn đề về số pixel, đó là vấn đề về kích thước thực tế (tính bằng mm hoặc inch) của các ký tự trên màn hình, phụ thuộc vào mật độ pixel. Do đó "min-width:" và "max-width:" là vô dụng. Một lời giải thích đầy đủ về vấn đề này có ở đây: tỷ lệ pixel thiết bị chính xác là gì?

Các truy vấn "@media" có tính đến số pixel và tỷ lệ pixel của thiết bị, dẫn đến "độ phân giải ảo", đó là những gì bạn phải thực sự tính đến khi thiết kế trang của mình: nếu phông chữ của bạn có chiều rộng cố định 10px và " độ phân giải ngang ảo "là 300 px, sẽ cần 30 ký tự để điền vào một dòng.

Ngày nay, điều phổ biến nhất là nhìn thấy các thiết bị màn hình võng mạc, nói cách khác: các thiết bị có độ phân giải cao và mật độ điểm ảnh rất cao (nhưng thường nhỏ hơn 6 inch kích thước vật lý). Đó là lý do tại sao bạn sẽ cần võng mạc hiển thị các truy vấn phương tiện chuyên dụng trên CSS của bạn. Đây là ví dụ đầy đủ nhất mà tôi có thể tìm thấy:

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

}

Nguồn: Trang web CSS-Tricks

Vì có nhiều kích thước màn hình khác nhau luôn thay đổi và rất có thể sẽ luôn thay đổi cách tốt nhất để đi là dựa trên các điểm dừng và truy vấn phương tiện trên thiết kế của bạn.

Cách dễ nhất để làm điều này là lấy thiết kế máy tính để bàn đã hoàn thành của bạn và mở nó trong trình duyệt web của bạn. Thu nhỏ màn hình từ từ để làm cho nó hẹp hơn. Quan sát để xem khi thiết kế bắt đầu, "phá vỡ" , hoặc trông khủng khiếp và chật chội. Tại thời điểm này, một điểm dừng với một truy vấn phương tiện sẽ được yêu cầu.

Việc tạo ba bộ truy vấn phương tiện cho máy tính để bàn, máy tính bảng và điện thoại là điều phổ biến. Nhưng nếu thiết kế của bạn trông tốt trên cả ba, tại sao phải bận tâm với sự phức tạp của việc thêm ba truy vấn phương tiện khác nhau không cần thiết. Làm điều đó trên cơ sở khi cần thiết!

Một tính năng bổ sung là bạn cũng có thể sử dụng - truy vấn phương tiện trong thuộc tính đa phương tiện của <link>thẻ.

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

Với điều này, trình duyệt sẽ tải xuống tất cả các tài nguyên CSS, bất kể thuộc tính đa phương tiện . Sự khác biệt là nếu truy vấn phương tiện của thuộc tính media được đánh giá là false thì tệp .css đó và nội dung của anh ta sẽ không bị chặn kết xuất.

Do đó, nên sử dụng thuộc tính media trong <link>thẻ vì nó đảm bảo trải nghiệm người dùng tốt hơn.

Tại đây, bạn có thể đọc một bài viết của Google về vấn đề này https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Một số công cụ sẽ giúp bạn tự động hóa việc tách mã css của bạn trong các tệp khác nhau theo truy vấn phương tiện của bạn

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splmit-plugin

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

Hành vi không thay đổi trên máy tính để bàn. Nhưng trên máy tính bảng và điện thoại di động, tôi mở rộng thanh điều hướng để che hình ảnh logo lớn. Lưu ý: Sử dụng lề (trên và dưới) nhiều như bạn cần cho chiều cao logo của bạn.

Đối với trường hợp của tôi, 60px trên và dưới hoạt động hoàn hảo!

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

Kiểm tra thanh điều hướng ở đây .

• Thêm thiết bị nhỏ ~ Điện thoại (<768px)
• Thiết bị nhỏ ~ Máy tính bảng (> = 768px)
• Thiết bị trung bình ~ Máy tính để bàn (> = 992px)
• Thiết bị lớn ~ Máy tính để bàn (> = 1200px)

Tôi đang sử dụng một trong những để làm công việc của tôi.

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

    }