การค้นหาสื่อ: วิธีกำหนดเป้าหมายเดสก์ท็อปแท็บเล็ตและอุปกรณ์เคลื่อนที่

ฉันทำการค้นคว้าเกี่ยวกับการสืบค้นสื่อและฉันยังไม่เข้าใจวิธีกำหนดเป้าหมายอุปกรณ์ที่มีขนาดที่แน่นอน

ฉันต้องการกำหนดเป้าหมายเดสก์ท็อปแท็บเล็ตและมือถือ ฉันรู้ว่าจะมีความแตกต่างบางอย่าง แต่มันก็ดีที่มีระบบทั่วไปที่สามารถใช้เพื่อกำหนดเป้าหมายอุปกรณ์เหล่านี้

ตัวอย่างบางส่วนที่ฉันได้พบ:

# 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 ems ดีกว่าที่จะซูม 1em === 16pxที่ซูมมาตรฐาน คูณพิกเซลโดย1em/16pxรับ EMS ตัวอย่างเช่น320px === 20em.

ในการตอบกลับความคิดเห็นนั้นmin-widthเป็นมาตรฐานในการออกแบบ "มือถือแรก" ซึ่งคุณเริ่มต้นด้วยการออกแบบสำหรับหน้าจอที่เล็กที่สุดของคุณแล้วเพิ่มแบบสอบถามสื่อที่เพิ่มมากขึ้น ไม่ว่าคุณต้องการmin-, max-หรือชุดดังกล่าวเป็นรู้ทันของคำสั่งของกฎของคุณ, การรักษาในใจว่าถ้ากฎหลายตรงกับองค์ประกอบเดียวกันกฎระเบียบในภายหลังจะแทนที่กฎก่อนหน้านี้

อย่ากำหนดเป้าหมายอุปกรณ์หรือขนาดเฉพาะ!

ภูมิปัญญาทั่วไปคือไม่ได้ที่จะกำหนดเป้าหมายอุปกรณ์หรือขนาดที่เฉพาะเจาะจงแต่วางใหม่คำว่า 'เบรกพอยต์':

• พัฒนาเว็บไซต์สำหรับมือถือโดยใช้เปอร์เซ็นต์หรือ EMS ไม่ใช่พิกเซล
• จากนั้นลองในวิวพอร์ตที่มีขนาดใหญ่ขึ้น
• ออกแบบเค้าโครงและเพิ่มแบบสอบถามสื่อ CSS เพียงเพื่อจัดการส่วนที่ขาด
• ทำซ้ำกระบวนการจนกว่าจะถึงจุดพักถัดไป

คุณสามารถใช้responsivepx.comเพื่อหาสิ่งที่จุดพัก 'ธรรมชาติ' ในขณะที่'จุดพักจะตาย' โดยมาร์คดรัมมอนด์

ใช้เบรกพอยต์ตามธรรมชาติ

'จุดพัก' จากนั้นกลายเป็นจุดที่เกิดขึ้นจริงซึ่งการออกแบบมือถือของคุณเริ่มที่จะ 'หยุด'คือหยุดใช้งานหรือชื่นชอบทางสายตา เมื่อคุณมีไซต์บนมือถือที่ใช้งานได้ดีโดยไม่มีคำสั่งสื่อคุณสามารถหยุดกังวลเกี่ยวกับขนาดเฉพาะและเพียงเพิ่มข้อความค้นหาสื่อที่จัดการวิวพอร์ตที่ใหญ่ขึ้นอย่างต่อเนื่อง

หากคุณไม่ได้พยายามที่จะตรึงการออกแบบให้มีขนาดหน้าจอที่แน่นอนวิธีนี้ทำงานโดยการลบความจำเป็นในการกำหนดเป้าหมายอุปกรณ์เฉพาะ ความสมบูรณ์ของการออกแบบของตัวเองในแต่ละจุดพักเพื่อให้แน่ใจว่ามันจะถือขึ้นในทุกขนาด กล่าวอีกนัยหนึ่งถ้าเมนู / ส่วนเนื้อหา / สิ่งที่หยุดใช้งานได้ในขนาดที่กำหนดให้ออกแบบเบรกพอยต์สำหรับขนาดนั้นไม่ใช่สำหรับขนาดอุปกรณ์ที่เฉพาะเจาะจง

ดูโพสต์ของ Lyza Gardner เกี่ยวกับจุดพักด้านพฤติกรรมและโพสต์ของ Zeldman เกี่ยวกับ Ethan Marcotte และการออกแบบเว็บที่ตอบสนองได้พัฒนามาจากแนวคิดเริ่มแรก

ใช้มาร์กอัปความหมาย

นอกจากนี้โครงสร้าง DOM เรียบง่ายและความหมายมากขึ้นด้วยnav, header, main, section, footerฯลฯ (การหลีกเลี่ยงสิ่งที่น่าสะอิดสะเอียนเช่นdiv class="header"กับชั้นซ้อนกันdivแท็ก) ได้ง่ายขึ้นก็จะได้รับการตอบสนองวิศวกรโดยเฉพาะอย่างยิ่งการหลีกเลี่ยงลอยโดยใช้CSS ตารางเค้าโครง (ซาร่าห์ Drasner ของเครื่องกำเนิดไฟฟ้าตารางเป็น เครื่องมือที่ยอดเยี่ยมสำหรับเรื่องนี้) และflexboxสำหรับการจัดเรียงและการสั่งซื้อใหม่ตามแผนการออกแบบ RWD ของคุณ

min-device-widthหากคุณต้องการที่จะกำหนดเป้าหมายอุปกรณ์แล้วเพียงแค่เขียน ตัวอย่างเช่น:

สำหรับ iPhone

@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. อุปกรณ์ขนาดเล็กพิเศษ (โทรศัพท์สูงสุด 480px)
2. อุปกรณ์ขนาดเล็ก (แท็บเล็ต 768px ขึ้นไป)
3. อุปกรณ์ขนาดกลาง (แท็บเล็ตแนวนอนขนาดใหญ่, แล็ปท็อปและเดสก์ท็อป, 992px ขึ้นไป)
4. อุปกรณ์ขนาดใหญ่ (เดสก์ท็อปขนาดใหญ่ 1200px ขึ้นไป)
5. e-reader แนวตั้ง (Nook / Kindle), แท็บเล็ตขนาดเล็ก - ความกว้างต่ำสุด: 481px
6. แท็บเล็ตภาพบุคคล, iPad แนวตั้ง, ผู้อ่านอีแนวนอน - ความกว้างต่ำสุด: 641px
7. แท็บเล็ต, iPad แนวนอน, แล็ปท็อปขนาดเล็ก - ความกว้างต่ำสุด: 961px
8. ความกว้างอุปกรณ์ของ HTC One: ความสูงอุปกรณ์ 360px: 640px -webkit-device-pixel-ratio: 3
9. ความกว้างของอุปกรณ์ Samsung Galaxy S2: 320px ความสูงของอุปกรณ์: 534px -webkit-device-pixel-ratio: 1.5 (นาที - อัตราส่วน moz-device-pixel-pixel: 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-pixel-อัตราส่วน: 2), - เบราว์เซอร์ Firefox ที่เก่ากว่า (ก่อน Firefox 16) -
11. ความกว้างของอุปกรณ์ Samsung Galaxy S4: 320px ความสูงของอุปกรณ์: 640px -webkit-device-pixel-ratio: 3
12. LG Nexus 4 ความกว้างของอุปกรณ์: 384px ความสูงของอุปกรณ์: 592px -webkit-device-pixel-ratio: 2
13. Asus Nexus 7 ความกว้างของอุปกรณ์: 601px ความสูงของอุปกรณ์: 906px -webkit-min-device-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)

มันไม่ใช่เรื่องของจำนวนพิกเซลมันเป็นเรื่องของขนาดจริง (เป็นมม. หรือนิ้ว) ของตัวละครบนหน้าจอซึ่งขึ้นอยู่กับความหนาแน่นของพิกเซล ดังนั้น "ความกว้างขั้นต่ำ:" และ "ความกว้างสูงสุด:" จึงไม่มีประโยชน์ คำอธิบายแบบเต็มของปัญหานี้อยู่ที่นี่: อัตราส่วนพิกเซลของอุปกรณ์คืออะไร

ข้อความค้นหา "@media" คำนึงถึงจำนวนพิกเซลและอัตราส่วนพิกเซลของอุปกรณ์ทำให้เกิด "ความละเอียดเสมือน" ซึ่งเป็นสิ่งที่คุณต้องคำนึงถึงในขณะที่ออกแบบหน้าเว็บของคุณ: หากแบบอักษรของคุณมีความกว้างคงที่ 10px และ " ความละเอียดแนวนอนเสมือน "คือ 300 px, 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

เนื่องจากมีขนาดหน้าจอที่แตกต่างกันจำนวนมากที่เปลี่ยนแปลงตลอดเวลาและมีแนวโน้มมากที่สุดที่จะเปลี่ยนวิธีที่ดีที่สุดเสมอไปคือการอ้างอิงจุดพักและข้อความค้นหาสื่อ ในการออกแบบของคุณ

วิธีที่ง่ายที่สุดในการดำเนินการนี้คือการออกแบบเดสก์ท็อปที่เสร็จสมบูรณ์แล้วเปิดในเว็บเบราว์เซอร์ของคุณ หดหน้าจอช้าลงเพื่อทำให้แคบลง สังเกตดูว่าการออกแบบเริ่มต้นเมื่อใด"หยุด"หรือดูน่ากลัวและคับแคบ ณ จุดนี้จำเป็นต้องมีจุดพักพร้อมแบบสอบถามสื่อ

เป็นเรื่องปกติที่จะสร้างการสืบค้นสื่อสามชุดสำหรับเดสก์ท็อปแท็บเล็ตและโทรศัพท์ แต่ถ้าการออกแบบของคุณดูดีทั้งสามข้อทำไมต้องกังวลกับความซับซ้อนในการเพิ่มข้อความค้นหาสื่อที่แตกต่างกันสามแบบที่ไม่จำเป็น ทำตามความจำเป็น!

คุณลักษณะพิเศษอย่างหนึ่งคือคุณยังสามารถใช้คิวรีสื่อในแอตทริบิวต์สื่อของ<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 ของคุณโดยอัตโนมัติในไฟล์ต่าง ๆ ตามการสืบค้นมีเดียของคุณ

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

ตรวจสอบ navbar ที่นี่

• อุปกรณ์ขนาดเล็กพิเศษ ~ โทรศัพท์ (<768px)
• อุปกรณ์ขนาดเล็ก ~ แท็บเล็ต (> = 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

    }