Pertanyaan Media: Bagaimana target desktop, tablet dan mobile?

Saya telah melakukan beberapa penelitian tentang pertanyaan media dan aku masih don't cukup memahami bagaimana untuk menargetkan perangkat dari ukuran-ukuran tertentu.

Saya ingin bisa untuk target desktop, tablet dan mobile. Aku tahu bahwa akan ada beberapa perbedaan, tapi itu akan menyenangkan untuk memiliki sistem generik yang dapat digunakan untuk menargetkan perangkat ini.

Beberapa contoh yang telah 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 anda pikir ini 'breakpoints' harus sama untuk masing-masing perangkat?

Quantastical
Pertanyaan edit 2 Mei 2013 в 1:06
Pemrograman
css3 css mobile tablet media-queries
16 Juni 2011 в 10:57
60 tayangan
Mengomentari pertanyaan (3)
Larutan

IMO ini adalah yang terbaik breakpoints:

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

Edit: Halus untuk bekerja lebih baik dengan 960 grid:

@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 prakteknya, banyak desainer mengkonversi piksel untuk ems, sebagian besar b/c ems baik mampu zooming. Di zoom standar 1em === 16px. Kalikan piksel dengan 1em/16px untuk mendapatkan ems. Misalnya, 320px === 20em.

Dalam menanggapi komentar, min-width adalah standar di "ponsel-pertama" desain, di mana anda mulai dengan merancang untuk layar terkecil, dan kemudian tambahkan terus meningkat media query, bekerja dengan cara anda ke yang lebih besar dan layar yang lebih besar. Terlepas dari apakah anda sukai min, max, atau kombinasi daripadanya, menjadi sadar dari urutan aturan anda, menjaga dalam pikiran bahwa jika beberapa aturan pertandingan unsur yang sama, kemudian aturan-aturan yang akan menggantikan aturan sebelumnya.

Komentar (16)

Jika anda ingin menargetkan perangkat kemudian hanya menulis min-device-width. Misalnya:

Untuk iPhone

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

Untuk tablet

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

Berikut ini adalah beberapa artikel yang baik:

Komentar (10)

Don't target spesifik perangkat atau ukuran!

Umum kebijaksanaan tidak untuk menargetkan perangkat tertentu atau ukuran, tapi untuk membingkai istilah 'breakpoint':

  • mengembangkan situs untuk mobile pertama dengan menggunakan persentase atau ems, tidak pixels,
  • kemudian mencoba hal ini di pandang dan catatan di mana ia mulai gagal,
  • merancang ulang tata letak dan tambahkan CSS media query hanya untuk menangani bagian yang rusak,
  • ulangi proses ini sampai anda mencapai breakpoint berikutnya.

Anda dapat menggunakan responsivepx.com untuk menemukan 'alam' breakpoints, seperti dalam 'breakpoints mati' oleh Marc Drummond.

Alami menggunakan breakpoints

The 'breakpoints' kemudian menjadi sebenarnya titik di mana ponsel anda desain mulai 'break' yaitu berhenti untuk dapat digunakan atau visual menyenangkan. Setelah anda memiliki situs mobile, tanpa media query, anda dapat berhenti khawatir tentang ukuran tertentu dan hanya menambahkan pertanyaan media yang menangani berturut-turut lebih besar viewports.

Jika anda're tidak mencoba untuk menyematkan desain yang sama ukuran layar, pendekatan ini bekerja dengan menghilangkan kebutuhan untuk menargetkan perangkat tertentu. The integritas dari desain itu sendiri di masing-masing breakpoint memastikan bahwa hal itu akan terus hingga di setiap ukuran. Dengan kata lain, jika menu/bagian konten/apapun berhenti yang dapat digunakan pada ukuran tertentu, desain breakpoint untuk yang ukuran, tidak untuk perangkat tertentu size.

Lihat Lyza Gardner's posting di perilaku breakpoints, dan juga Zeldman's posting tentang Ethan Marcotte dan bagaimana desain web yang responsif berevolusi dari intitial ide.

Menggunakan markup semantik

Lebih lanjut, sederhana dan lebih semantik struktur DOM dengan nav, header, utama, bagian, footer dll. (menghindari kekejian seperti div class="header" dengan nested dalam div kategori) akan lebih mudah untuk insinyur responsiveness, terutama menghindari mengapung dengan menggunakan CSS Grid Layout (Sarah Drasner's grid generator adalah alat yang hebat untuk ini) dan flexbox untuk mengatur dan kembali memesan sesuai dengan RWD rencana desain.

Dave Everitt
Jawaban edit 3 September 2019 в 8:28
Komentar (9)

  1. Saya telah menggunakan ini situs untuk menemukan resolusi dan dikembangkan CSS per angka-angka yang sebenarnya. Nomor saya bervariasi sedikit dari jawaban diatas, kecuali bahwa saya CSS sebenarnya adalah perangkat yang diinginkan.

  2. Juga, ini memiliki debugging bagian kode setelah media query e.g:

@media only screen and (min-width: 769px) and (max-width: 1281px) { / untuk tablet 10 inci layar / tubuh::before { isi: "tablet untuk beberapa desktop media query (769 > 1281) dipecat"; font-weight: bold; display: block; text-align: center; latar belakang: rgba(255, 255, 0, 0.9); / Semi-transparan kuning / position: absolute; top: 0; kiri: 0; kanan: 0; z-index: 99; } }

Tambahkan ini debugging item di setiap media query dan anda akan melihat apa yang query telah diterapkan.

loxsat
Jawaban edit 12 Januari 2019 в 10:25
Komentar (0)

Terbaik breakpoints 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) {

    }
Komentar (0)

Media queries untuk umum perangkat breakpoints

/* 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 */
}
Komentar (0)
  1. Ekstra kecil perangkat (ponsel, hingga 480px)
  2. Perangkat kecil (tablet, 768px dan up)
  3. Media perangkat (big lanskap tablet, laptop, dan desktop, 992px dan up)
  4. Besar perangkat (desktop besar, 1200px dan up)
  5. potret e-pembaca (Nook/Kindle), tablet yang lebih kecil - min-width:481px
  6. potret tablet, potret iPad, lanskap e-pembaca - min-width:641px
  7. tablet, lanskap iPad, lo-res laptop - min-width:961px
  8. HTC One device-width: 360px perangkat-height: 640px -webkit-perangkat-pixel-rasio: 3
  9. Samsung Galaxy S2 device-width: 320px perangkat-height: 534px -webkit-perangkat-pixel-rasio: 1.5 (min-moz-perangkat-pixel-rasio: 1.5), (-o-min-device-pixel-rasio: 3/2), (min-device-pixel-rasio: 1.5
  10. Samsung Galaxy S3 device-width: 320px perangkat-height: 640px -webkit-perangkat-pixel-rasio: 2 (min-moz-perangkat-pixel-rasio: 2), lebih Tua - Firefox browser (sebelum Firefox 16) -
  11. Samsung Galaxy S4 device-width: 320px perangkat-height: 640px -webkit-perangkat-pixel-rasio: 3
  12. LG Nexus 4 device-width: 384px perangkat-height: 592px -webkit-perangkat-pixel-rasio: 2
  13. Asus Nexus 7 device-width: 601px perangkat-height: 906px -webkit-min-device-pixel-rasio: 1.331) dan (-webkit-max-device-pixel-rasio: 1.332)
  14. iPad 1 dan 2, iPad Mini device-width: 768px perangkat-height: 1024px -webkit-perangkat-pixel-rasio: 1
  15. iPad 3 dan 4 device-width: 768px perangkat-height: 1024px -webkit-perangkat-pixel-rasio: 2)
  16. iPhone 3G device-width: 320px perangkat-height: 480px -webkit-perangkat-pixel-rasio: 1)
  17. iPhone 4 perangkat-width: 320px perangkat-height: 480px -webkit-perangkat-pixel-rasio: 2)
  18. iPhone 5 device-width: 320px perangkat-height: 568 piksel -webkit-perangkat-pixel-rasio: 2)
Komentar (1)

It's tidak masalah pixel count, it's masalah sebenarnya ukuran (dalam mm atau inci) dari karakter-karakter di layar, yang tergantung pada pixel density. Oleh karena itu "min-width:" dan "max-width:" tidak ada gunanya. Penjelasan lengkap tentang masalah ini di sini: https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio

"@media" pertanyaan memperhitungkan piksel menghitung dan perangkat rasio pixel, sehingga di "virtual resolusi" yang adalah apa yang anda harus benar-benar memperhitungkan sementara merancang halaman anda: jika anda font 10px fixed-width dan "virtual resolusi horizontal" adalah 300 px, 30 karakter yang akan dibutuhkan untuk mengisi garis.

Komentar (1)

Karena ada banyak menyesuaikan ukuran layar yang selalu berubah dan kemungkinan besar akan selalu mengubah cara terbaik untuk pergi adalah untuk pilihan anda break point dan media pertanyaan pada desain anda.

Cara termudah untuk pergi tentang ini adalah untuk ambil anda selesai desain desktop dan buka di browser web anda. Psikiater layar perlahan-lahan untuk membuatnya lebih sempit. Mengamati untuk melihat ketika desain mulai, "break", atau terlihat buruk dan sempit. Pada titik ini titik istirahat dengan media query akan diperlukan.

It's yang umum untuk membuat tiga set pertanyaan media untuk desktop, tablet dan ponsel. Tapi jika desain anda terlihat baik di semua tiga, mengapa repot-repot dengan kompleksitas menambahkan tiga media yang berbeda pertanyaan yang tidak perlu. Lakukan hal ini pada dasar yang dibutuhkan!

loxsat
Jawaban edit 12 Januari 2019 в 10:32
Komentar (0)

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

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

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

Periksa navbar di sini.

loxsat
Jawaban edit 12 Januari 2019 в 10:28
Komentar (0)

Saat ini hal yang paling umum adalah untuk melihat retina layar perangkat, dengan kata lain: perangkat dengan resolusi tinggi dan kepadatan pixel sangat tinggi (tetapi biasanya lebih kecil dari 6 inci ukuran fisik). Yang's mengapa anda akan perlu retina display berupa media query pada CSS anda. Ini adalah contoh 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: CSS-Tricks Website

Komentar (0)

Salah satu fitur tambahan adalah anda juga dapat menggunakan media queries media atribut <link> tag.

Dengan ini, browser akan men-download semua sumber daya CSS, terlepas dari media atribut. Perbedaan adalah bahwa jika media-query dari media atribut yang dievaluasi palsu itu .file css dan konten nya tidak akan di-render-blocking.

Oleh karena itu, dianjurkan untuk menggunakan media atribut di <link> tag karena itu adalah pengalaman pengguna yang lebih baik.

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

Beberapa alat yang akan membantu anda untuk mengotomatisasi pemisahan kode css anda dalam berbagai file yang menurut anda media-querys

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

Komentar (0)
  • Tambahan perangkat kecil ~ Ponsel (< 768px)
  • Perangkat kecil ~ Tablet (>= 768px)
  • Media perangkat ~ Desktop (>= 992px)
  • Perangkat besar ~ Desktop (>= 1200px)
loxsat
Jawaban edit 12 Januari 2019 в 10:30
Komentar (0)

Saya menggunakan satu 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 */
}
Komentar (0)
 
@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

    }
Shailesh
Jawaban edit 14 September 2018 в 12:03
Komentar (0)