it-swarm-id.com

Mengapa kueri media CSS3 saya tidak berfungsi pada perangkat seluler?

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 peramban 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?

158
redconservatory

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

398
redconservatory

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

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

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

21
Moin Zaman

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.

17
Mohsen

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

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

Saya telah menyalin bootstrap 4 kueri media langsung dari dokumen mereka dan setiap kueri dilabeli dengan markup komentar gaya javascript yang sama //!

Selain itu, editor teks IntelliJ memungkinkan saya untuk mengomentari baris css tertentu dalam file KURANG tetapi secara otomatis menggunakan //. Ini bukan freeware jadi saya menganggap itu benar. Ada menu preferensi untuk memperbaiki perilaku ini.

Juga, validasi css Anda dengan validator online yang tepercaya. Ini satu per W

2
Cameron Donahue
@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;
}
1
Ketam Srinivas

Bagi saya, saya telah menunjukkan max-height bukan max-width.

Jika itu Anda, pergi ubah!

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

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.

0
benteh

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

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

Lalu saya mengubahnya ke ini untuk memperbaikinya

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

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

0
Suhail AKhtar

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

0
Seth