Kueri Media: Bagaimana menargetkan desktop, tablet, dan seluler?

Saya telah melakukan riset tentang pertanyaan media dan saya masih tidak begitu mengerti bagaimana menargetkan perangkat dengan ukuran tertentu.

Saya ingin dapat menargetkan desktop, tablet, dan seluler. Saya tahu bahwa akan ada beberapa perbedaan tetapi akan menyenangkan jika memiliki sistem generik yang dapat digunakan untuk menargetkan perangkat ini.

Beberapa contoh yang saya temukan:

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

Atau:

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

Apa yang harus breakpoint untuk setiap perangkat?

IMO ini adalah breakpoints terbaik:

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

Sunting : Disempurnakan agar bekerja lebih baik dengan 960 kisi:

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

Dalam praktiknya, banyak desainer mengonversi piksel menjadi em, sebagian besar lebih baik memperbesar / memperkecil tampilannya. Pada zoom standar 1em === 16px. Lipat gandakan piksel dengan 1em/16pxuntuk mendapatkan ems. Sebagai contoh 320px === 20em,.

Menanggapi komentar, min-widthadalah standar dalam desain "mobile-first", di mana Anda mulai dengan mendesain untuk layar terkecil Anda, dan kemudian menambahkan permintaan media yang semakin meningkat, bekerja menuju layar yang lebih besar dan lebih besar. Terlepas dari apakah Anda lebih suka min-,, max-atau kombinasi daripadanya, waspadai urutan aturan Anda, ingatlah bahwa jika beberapa aturan cocok dengan elemen yang sama, aturan selanjutnya akan menggantikan aturan sebelumnya.

Jangan menargetkan perangkat atau ukuran tertentu!

The kebijaksanaan umum adalah untuk tidak menargetkan perangkat atau ukuran tertentu , tetapi untuk membingkai ulang istilah 'breakpoint':

• kembangkan situs untuk seluler terlebih dahulu menggunakan persentase atau ems, bukan piksel,
• kemudian coba di viewport yang lebih besar dan catat di mana ia mulai gagal,
• mendesain ulang tata letak dan menambahkan kueri media CSS hanya untuk menangani bagian yang rusak,
• ulangi prosesnya sampai Anda mencapai breakpoint berikutnya.

Anda dapat menggunakan responssivepx.com untuk menemukan breakpoint 'alami', seperti pada 'breakpoints dead' oleh Marc Drummond .

Gunakan breakpoint alami

'Breakpoints' kemudian menjadi titik aktual di mana desain ponsel Anda mulai 'pecah' yaitu berhenti digunakan atau menyenangkan secara visual. Setelah Anda memiliki situs seluler yang berfungsi dengan baik, tanpa kueri media, Anda bisa berhenti mengkhawatirkan ukuran tertentu dan hanya menambahkan kueri media yang menangani viewports yang lebih besar secara berturut-turut.

Jika Anda tidak mencoba menyematkan desain ke ukuran layar yang tepat, pendekatan ini berfungsi dengan menghapus kebutuhan untuk menargetkan perangkat tertentu . The integritas desain sendiri pada setiap breakpoint memastikan bahwa hal itu akan terus naik pada ukuran. Dengan kata lain, jika bagian menu / konten / apa pun berhenti dapat digunakan pada ukuran tertentu, desain breakpoint untuk ukuran itu , bukan untuk ukuran perangkat tertentu.

Lihat posting Lyza Gardner tentang breakpoint perilaku , dan juga posting Zeldman tentang Ethan Marcotte dan bagaimana desain web responsif berevolusi dari ide awal.

Gunakan markup semantik

Selanjutnya, sederhana dan lebih semantik struktur DOM dengan nav, header, main, section, footerdll (menghindari perbuatan-perbuatan keji seperti div class="header"dengan inner bersarang divtag) yang akan lebih mudah untuk tanggap insinyur, terutama menghindari mengapung dengan menggunakan CSS Grid Tata Letak (Sarah Drasner ini pembangkit jaringan adalah alat hebat untuk ini) dan flexbox untuk mengatur dan memesan ulang sesuai dengan rencana desain RWD Anda.

Jika Anda ingin menargetkan perangkat maka cukup tulis min-device-width. Sebagai contoh:

Untuk iPhone

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

Untuk tablet

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

Berikut beberapa artikel bagus:

• Cara menyesuaikan situs web Anda dengan Apple iPad
• Permintaan Media CSS3

1. Saya telah menggunakan situs ini untuk menemukan resolusi dan mengembangkan CSS per angka aktual. Angka saya sedikit berbeda dari jawaban di atas, kecuali bahwa CSS saya benar-benar mengenai perangkat yang diinginkan.

2. Juga, minta kode debugging ini tepat setelah permintaan media Anda mis:

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

   Tambahkan item debug ini di setiap kueri media dan Anda akan melihat kueri apa yang telah diterapkan.

Breakpoints terbaik yang direkomendasikan oleh 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) {

    }

Kueri media untuk breakpoint perangkat umum

/* 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. Perangkat ekstra kecil (telepon, hingga 480px)
2. Perangkat kecil (tablet, 768px ke atas)
3. Perangkat menengah (tablet lanskap besar, laptop, dan desktop, 992px ke atas)
4. Perangkat besar (desktop besar, 1200px dan lebih tinggi)
5. e-reader potret (Sudut / Kindle), tablet yang lebih kecil - lebar minimum: 481px
6. tablet potret, potret iPad, landscape e-reader - lebar minimum: 641px
7. tablet, iPad lanskap, laptop lo-res - lebar minimum: 961px
8. Lebar perangkat HTC One: tinggi perangkat 360px: 640px -webkit-perangkat-pixel-rasio: 3
9. Lebar perangkat Samsung Galaxy S2: tinggi perangkat 320px: tinggi 534px -webkit-perangkat-pixel-rasio: 1,5 (min - rasio perangkat-moz-pixel: 1,5), (-o-min-perangkat-pixel-rasio: 3/2), (min-perangkat-pixel-rasio: 1,5
10. Lebar perangkat Samsung Galaxy S3: tinggi perangkat 320px: 640px -webkit-perangkat-pixel-rasio: 2 (min - moz-perangkat-pixel-rasio: 2), - Browser Firefox yang lebih lama (sebelum Firefox 16) -
11. Lebar perangkat Samsung Galaxy S4: tinggi perangkat 320px: 640px -webkit-perangkat-pixel-rasio: 3
12. Lebar perangkat LG Nexus 4: tinggi perangkat 384px: 592px -webkit-perangkat-pixel-rasio: 2
13. Lebar perangkat Nexus Nexus 7: tinggi perangkat 601px: tinggi 906px -webkit-min-perangkat-pixel-rasio: 1.331) dan (-webkit-max-perangkat-pixel-rasio: 1.332)
14. iPad 1 dan 2, lebar perangkat iPad Mini: 768px tinggi perangkat: 1024px -webkit-perangkat-pixel-rasio: 1
15. iPad 3 dan 4 lebar perangkat: 768px tinggi perangkat: 1024px -webkit-perangkat-piksel-rasio: 2)
16. Lebar perangkat iPhone 3G: tinggi perangkat 320px: 480px -webkit-perangkat-pixel-rasio: 1)
17. Lebar perangkat iPhone 4: tinggi perangkat 320px: tinggi 480px -webkit-perangkat-piksel-rasio: 2)
18. Lebar perangkat iPhone 5: tinggi perangkat 320px: 568px -webkit-perangkat-pixel-rasio: 2)

Ini bukan masalah jumlah piksel, ini masalah ukuran aktual (dalam mm atau inci) karakter di layar, yang tergantung pada kerapatan piksel. Karenanya "min-width:" dan "max-width:" tidak berguna. Penjelasan lengkap tentang masalah ini ada di sini: apa sebenarnya rasio piksel perangkat?

"@media" kueri memperhitungkan jumlah piksel dan rasio piksel perangkat, menghasilkan "resolusi virtual" yang harus Anda perhitungkan saat mendesain halaman Anda: jika font Anda 10px lebar-lebar dan " resolusi horisontal virtual "adalah 300 px, diperlukan 30 karakter untuk mengisi satu baris.

Saat ini yang paling umum adalah melihat perangkat layar retina, dengan kata lain: perangkat dengan resolusi tinggi dan kerapatan piksel sangat tinggi (tetapi biasanya lebih kecil dari 6 inci ukuran fisik). Itu sebabnya Anda akan memerlukan retina menampilkan kueri media khusus pada CSS Anda. Ini adalah contoh paling lengkap yang bisa saya temukan:

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

}

Sumber: Situs Web CSS-Trik

Karena ada banyak ukuran layar yang bervariasi yang selalu berubah dan kemungkinan besar akan selalu mengubah cara terbaik untuk pergi adalah dengan mendasarkan titik istirahat dan pertanyaan media pada desain Anda.

Cara termudah untuk melakukannya adalah dengan mengambil desain desktop Anda yang sudah selesai dan membukanya di browser web Anda. Kecilkan layar secara perlahan agar lebih sempit. Amati untuk melihat kapan desain mulai, "pecah" , atau terlihat mengerikan dan sempit. Pada titik ini diperlukan break point dengan permintaan media.

Sudah biasa membuat tiga set kueri media untuk desktop, tablet, dan ponsel. Tetapi jika desain Anda terlihat bagus pada ketiganya, mengapa repot dengan kompleksitas menambahkan tiga kueri media yang berbeda yang tidak perlu. Lakukan sesuai kebutuhan!

Satu fitur tambahan adalah Anda juga dapat menggunakan kueri media dalam atribut media dari <link>tag.

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

Dengan ini, browser akan mengunduh semua sumber daya CSS, terlepas dari atribut media . Perbedaannya adalah bahwa jika kueri media dari atribut media dievaluasi menjadi false, maka file .css dan kontennya tidak akan diblokir.

Oleh karena itu, disarankan untuk menggunakan atribut media dalam <link>tag karena itu menjamin pengalaman pengguna yang lebih baik.

Di sini Anda dapat membaca artikel Google tentang masalah ini https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Beberapa alat yang akan membantu Anda untuk mengotomatiskan pemisahan kode css Anda dalam file yang berbeda sesuai dengan pertanyaan media Anda

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

Perilaku tidak berubah di desktop. Tetapi pada tablet dan ponsel, saya memperluas navbar untuk menutupi gambar logo besar. Catatan: Gunakan margin (atas dan bawah) sebanyak yang Anda butuhkan untuk tinggi logo Anda.

Untuk kasus saya, 60px atas dan bawah bekerja dengan sempurna!

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

Periksa navbar di sini .

• Perangkat ekstra kecil ~ Ponsel (<768px)
• Perangkat kecil ~ Tablet (> = 768px)
• Perangkat sedang ~ Desktops (> = 992px)
• Perangkat besar ~ Desktops (> = 1200px)

Saya menggunakan yang berikut untuk melakukan pekerjaan saya.

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

    }