Mengapa kueri media CSS3 saya tidak berfungsi?

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?

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 ...

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

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

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

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.

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) {}

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

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)

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

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?

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.

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

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){
}

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.

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

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

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.