Mengapa kueri media CSS3 saya tidak berfungsi?


183

Di styles.css, saya menggunakan kueri media, keduanya menggunakan variasi:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Situs mengubah ukuran ke tata letak yang saya inginkan di browser biasa (Safari, Firefox) ketika saya mengecilkan jendela, namun, tata letak seluler tidak ditampilkan sama sekali di telepon. Sebagai gantinya, saya hanya melihat CSS default.

Adakah yang bisa mengarahkan saya ke arah yang benar?


3
Ponsel apa itu? Media Queries adalah fitur baru dalam CSS, tidak semua browser ponsel mendukungnya ...
Sparky

1
iPhone 4 dan saya juga menguji pada ponsel android (2.2 Froyo) dengan resolusi 320 x 480.
redconservatory

Sebenarnya saya beralih ke media Query berikut pada iPhone 4 dan berfungsi (tapi saya harus mengubah CSS untuk mengakomodasi resolusi yang lebih tinggi) Layar @media saja dan (-webkit-min-device-pixel-rasio: 2) {}
redconservatory

Saya akhirnya menyadari bahwa saya hilang pxdi @media (max-width: 320px).
Ryan

dalam kasus saya, itu karena konsol pengembang krom terbuka sehingga ketinggiannya tidak seperti yang saya pikirkan
Rabolf

Jawaban:


476

Ketiga hal ini adalah tips yang bermanfaat, tetapi sepertinya saya perlu menambahkan tag meta:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Sekarang tampaknya berfungsi di Android (2.2) dan iPhone baik-baik saja ...


59
Sebenarnya <meta name = "viewport" content = "width = lebar perangkat, skala awal = 1">
Lukas Lukac

4
8 tahun kemudian dan ini masih berguna. Saya melewatkan meta tag juga dan tidak bisa membuat kueri media berfungsi dalam suatu proyek. Tag dan tag viewport, berfungsi
SoWhat

1
9 tahun kemudian, masih sangat bermanfaat. Tidak percaya saya lupa itu
Breno Baiardi

@LukasLukac kenapa begitu?
Jonesopolis

68

Jangan lupa untuk memiliki deklarasi css standar di atas kueri media atau kueri tidak akan berfungsi.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

5
Bahkan, susun gaya css Anda dalam urutan menurun dari standar ke ukuran terkecil. Aturan masih berlaku Jika Anda memiliki semua pertanyaan media di file yang sama.
Phil Andrews

1
Bekerja untuk saya bahkan jika saya tidak memiliki deklarasi css standar untuk kelas tersebut.
Mason

Ini menyelesaikan masalah saya. Terima kasih banyak ... Saya mengabaikan kemungkinan CSS saya terlalu banyak ditulis.
pmcg521

20

Saya menduga kata kunci onlymungkin menjadi masalah di sini. Saya tidak punya masalah menggunakan kueri media seperti ini:

@media screen and (max-width: 480px) { }


20

saya menggunakan bootstrap di situs pers tetapi tidak bekerja pada IE8, saya menggunakan javascript css3-mediaqueries.js tetapi masih tidak berfungsi. jika Anda ingin kueri media Anda berfungsi dengan layar tambahkan file javascript ini ke baris kueri media Anda di css

berikut ini sebuah contoh:

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

Garis tautan css sesederhana garis di atas.


12

Hari ini saya memiliki situasi yang sama. Permintaan media tidak berfungsi. Setelah beberapa saat saya menemukan bahwa ruang setelah 'dan' hilang. Kueri media yang tepat akan terlihat seperti ini:

@media screen and (max-width: 1024px) {}

1
Itu sebabnya kami memiliki validator CSS. Ini tidak relevan dengan masalah khusus ini karena OP sudah menunjukkan bahwa permintaan media benar-benar berfungsi di browser non-seluler.
cimmanon

4
Masih menemukan ini bermanfaat karena itu adalah masalah dalam kasus saya
Loren Shqipognja

4

Urutan kode css berurutan juga penting, misalnya:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

kode di atas tidak akan berfungsi karena perintah yang dijalankan. Perlu menulis sebagai berikut:

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Itulah kesalahan yang saya buat. Terima kasih.
VorganHaze

4

Selalu sebutkan max-width dan min-width di beberapa unit seperti px atau rem. Ini yang membuat saya sadar. Jika saya menulisnya tanpa unit dan hanya nilai angka, browser tidak dapat membaca kueri media. contoh: ini salah layar @media saja dan (max-width: 950) dan ini adalah layar kanan @media saja dan (max-width: 950px)


Terima kasih! Meskipun saya melihat semua contoh, saya tidak pernah memperhatikan bahwa saya telah melupakan px!
tandai dan

2

Melemparkan jawaban lain ke atas ring. Jika Anda mencoba menggunakan variabel CSS, maka itu akan gagal.

@media screen and (max-device-width: var(--breakpoint-small)) {}

Variabel CSS tidak berfungsi di kueri media (sesuai desain).


2

Alasan aneh yang belum pernah saya lihat sebelumnya: Jika Anda menggunakan pemilih "parent> child" di luar kueri media (di Firefox 69), itu bisa memecah kueri media. Saya tidak yakin mengapa ini terjadi, tetapi untuk skenario saya ini tidak berhasil ...

@media whatever {
    #child { display: none; }
}

Tetapi menambahkan induk untuk mencocokkan beberapa CSS lain lebih jauh ke atas halaman, ini berfungsi ...

#parent > #child { display: none; }

Sepertinya menetapkan orang tua tidak masalah, karena id sangat spesifik dan tidak boleh ada ambiguitas. Mungkin itu bug di Firefox?


2

Cuplikan kode OP jelas menggunakan markup komentar yang benar tetapi CSS dapat memecah secara progresif - jadi, jika ada kesalahan sintaks, semuanya setelah itu cenderung gagal. Beberapa kali saya mengandalkan sumber yang dapat dipercaya yang memberikan markup komentar yang salah yang merusak style sheet saya. Karena OP hanya menyediakan sebagian kecil dari kode mereka, saya sarankan yang berikut:

Pastikan semua komentar CSS Anda menggunakan markup ini /*... */- yang merupakan markup komentar yang benar untuk css menurut MDN

Validasi css Anda dengan linter atau validator online yang aman. Ini satu per W3

Info lebih lanjut: Saya pergi untuk memeriksa breakpoint kueri media yang direkomendasikan terbaru dari bootstrap 4 dan akhirnya menyalin pelat ketel langsung dari dokumen mereka. Hampir setiap blok kode dilabeli dengan komentar gaya javascript //, yang memecahkan kode saya - dan memberi saya hanya kesalahan kompilasi samar yang dapat memecahkan masalah, yang melintas di kepala saya saat itu dan membuat saya sedih.

Editor teks IntelliJ memungkinkan saya untuk mengomentari baris css tertentu dalam file KURANG menggunakan ctrl + / hotkey yang hebat kecuali itu menyisipkan //secara default pada jenis file yang tidak dikenal . Ini bukan freeware dan kurang cukup arus utama jadi saya percaya dan pergi dengannya. Itu memecahkan kode saya. Ada menu preferensi untuk mengajarkan markup komentar yang benar untuk setiap jenis file.


1
OP sudah menggunakan markup komentar yang benar, seperti yang ditunjukkan dalam posting .
TylerH

Sebenarnya jika Anda mengarahkan kursor ke tombol downvote, Anda akan tahu persis untuk apa mereka . Selain itu, downvotes adalah 1) anonim dan 2) tidak trolling. Lebih jauh, membakar seseorang bukanlah cara untuk membuat mereka mengubah sesuatu yang Anda pikir telah mereka lakukan.
TylerH

Astaga! Kamu menyelamatkan hariku.
limfinity

2

Menyertakan tag meta seperti di bawah ini dapat menyebabkan peramban untuk menangani zoom viewport berbeda.

<meta content="width=device-width, initial-scale=1" name="viewport" />


1

Saya menemukan masalah ini baru-baru ini juga, dan saya kemudian menemukan itu karena saya tidak memberi jarak antara anddan (. Ini kesalahannya

@media screen and(max-width:768px){
}

Lalu saya mengubahnya ke ini untuk memperbaikinya

@media screen and (max-width:768px){
}

0

Saya menggunakan beberapa metode tergantung. Dalam stylesheet yang sama saya gunakan: @ media (max-width: 450px), atau untuk terpisah pastikan Anda memiliki tautan di header dengan benar. Saya telah melihat fixmeup Anda dan Anda memiliki berbagai tautan yang membingungkan ke css. Kerjanya seperti yang Anda katakan juga pada keinginan HTC S.


Akan melihat CSS lagi, terima kasih ... senang mengetahui itu bekerja pada sesuatu.
redconservatory

0
@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

7
tolong tambahkan beberapa penjelasan ke kode Anda, tunjukkan bagaimana ini memecahkan masalah - ini akan membantu orang lain di masa depan, dan jawaban Anda lebih cenderung terangkat
Manusia Kami di Pisang

2
Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
Ferrybig

0

Bagi saya, saya telah menunjukkan max-heightbukan max-width.

Jika itu Anda, pergi ubah!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

0

Ini juga dapat terjadi jika tingkat pembesaran peramban tidak benar. Zoom jendela browser Anda harus 100%. Di Chrome gunakan Ctrl + 0untuk mengatur ulang level zoom.


1
Ini seharusnya tidak diberi suara. Ini adalah jawaban untuk masalah frustasi saya!
Amir Almusawi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.