CSS3 medya sorgularım neden çalışmıyor?

Styles.css dosyasında her ikisi de bir varyasyon kullanan medya sorguları kullanıyorum:

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

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

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

Siteler, pencereyi küçültdüğümde normal bir tarayıcıda (Safari, Firefox) istediğim düzene göre yeniden boyutlandırılıyor, ancak mobil düzen bir telefonda hiç gösterilmiyor. Bunun yerine, sadece varsayılan CSS'yi görüyorum.

Birisi beni doğru yöne yönlendirebilir mi?

Bunların üçü de yararlı ipuçlarıydı, ancak bir meta etiket eklemem gerekiyor gibi görünüyor:

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

Şimdi hem Android (2.2) hem de iPhone'da çalışıyor gibi görünüyor ...

Ortam sorgusunun üzerinde standart css bildirimlerinin bulunmasını unutmayın, aksi takdirde sorgu da çalışmaz.

.edcar_letter{
    font-size:180px;
}

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

Anahtar kelimenin onlyburada sorun olabileceğinden şüpheleniyorum . Böyle medya sorguları kullanarak hiçbir sorun yok:

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

Bir basın sitesinde bootstrap kullandım ama IE8 üzerinde çalışmadı, css3-mediaqueries.js javascript kullanılmış ama hala çalışmıyor. medya sorgunuzun bu javascript dosyasıyla çalışmasını istiyorsanız css'deki medya sorgu satırınıza ekran ekleyin

işte bir örnek :

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

css Bağlantı satırı yukarıdaki satır kadar basit.

Bugün de benzer bir durum yaşadım. Medya sorgusu çalışmadı. Bir süre sonra 've' karakterinden sonra boşluğu buldum. Uygun medya sorgusu şöyle görünmelidir:

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

Css kodunun sıralı sırası da önemlidir, örneğin:

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

Yukarıdaki kod, yürütülen sipariş nedeniyle çalışmaz. Aşağıdaki gibi yazmanız gerekiyor ：

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

Her zaman px veya rem gibi bazı birimlerde maksimum genişlik ve minimum genişlikten bahsedin. Bu benim için çözdü. Ünite olmadan ve yalnızca sayı değeri olmadan yazarsam, tarayıcı medya sorgularını okuyamaz. örnek: bu sadece @media yalnızca ekranı ve (max-width: 950) yanlış ve bu sadece @media sadece ekranı ve (max-width: 950px)

Yüzüğe başka bir cevap atmak. CSS değişkenlerini kullanmaya çalışıyorsanız, sessizce başarısız olur.

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

CSS değişkenleri medya sorgularında (tasarım gereği) çalışmaz.

Daha önce hiç görmediğim garip neden: Medya sorgusunun dışında (Firefox 69'da) bir "üst> alt" seçici kullanıyorsanız medya sorgusunu bozabilir. Bunun neden olduğundan emin değilim, ancak senaryom için bu işe yaramadı ...

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

Ancak, üstteki diğer CSS'leri eşleştirmek için üst öğeyi ekleyerek bu işe yarar ...

#parent > #child { display: none; }

Bir kimlik çok spesifik olduğu ve belirsizlik olmaması gerektiğinden ebeveynin belirtilmesi önemli değildir. Belki Firefox'ta bir hata?

OP'nin kod snippet'i doğru yorum işaretlemesini açıkça kullanır, ancak CSS aşamalı bir şekilde kırılabilir - bu nedenle, bir sözdizimi hatası varsa, bundan sonraki her şey başarısız olur. Birkaç kez stil sayfamı bozan yanlış yorum işaretlemesi sağlayan güvenilir kaynaklara güvendim . OP kodlarının sadece küçük bir bölümünü sağladığı için aşağıdakileri öneririm:

Tüm CSS yorumlarınızın bu işaretlemeyi kullandığından emin olun /*... */- MDN'ye göre css için doğru yorum işaretlemesi

Css'nizi bir linter veya güvenli bir çevrimiçi doğrulayıcı ile doğrulayın. İşte W3'ten biri

Daha fazla bilgi: Bootstrap 4'teki en son önerilen ortam sorgusu kesme noktalarını kontrol etmeye gittim ve kazan plakasını doğrudan dokümanlarından kopyaladım. Hemen hemen her kod bloğu, kodumu //bozan javascript tarzı yorumlarla etiketlendi ve bana sadece sorun gidermek için şifreli derleme hataları verdi, bu da o zaman kafamın üzerinden geçti ve üzüntü verdi.

IntelliJ metin editörü beni haricinde büyük ctrl + / kısayol kullanarak bir AZ dosyasında css belirli satırları izin o ekler //tanınmayan dosya türleri varsayılan olarak . Ücretsiz değil ve daha az oldukça ana akım yani güvenilir ve onunla birlikte gitti. Bu benim kodumu kırdı. Her dosya türü için doğru yorum işaretlemesini öğretmek üzere bir tercih menüsü vardır.

Aşağıdaki gibi bir meta etiket eklemek tarayıcının görünüm alanı yakınlaştırmasını farklı şekilde işlemesine neden olabilir.

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

Son zamanlarda da bu sorunla karşılaştım ve daha sonra bunun andve ile arasında boşluk bırakmadığımı öğrendim (. Bu hataydı

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

Sonra düzeltmek için bunu değiştirdim

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

Birkaç yöntem bağlı olarak kullanıyorum. Aynı stil sayfasında: @media (max-width: 450px) kullanıyorum veya ayrı olarak başlıkta bağlantının doğru olduğundan emin olun. Senin fixmeup bir göz vardı ve css için kafa karıştırıcı bir dizi var. HTC desire S'de de söylediğiniz gibi davranır.

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

Benim max-heightyerine belirtmiştim max-width.

Eğer sizseniz, gidip değiştirin!

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

Tarayıcı yakınlaştırma düzeyi doğru değilse de olabilir. Tarayıcı pencerenizin yakınlaştırması% 100 olmalıdır. Chrome'da Ctrl + 0yakınlaştırma seviyesini sıfırlamak için kullanın .