@Media ekranı ve (maks. Genişlik: 1024 piksel) CSS'de ne anlama geliyor?

Bu kod parçasını miras aldığım bir CSS dosyasında buldum, ancak bundan bir anlam çıkaramıyorum:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

Özellikle, ilk satırda neler oluyor?

Bu bir medya sorgusu. Tarayıcı içerdiği testleri geçmediği sürece içindeki CSS'nin çalışmasını engeller.

Bu medya sorgusundaki testler:

1. @media screen- Tarayıcı kendini “ekran” kategorisinde olarak tanımlar. Bir örneğin aksine - Bu kabaca tarayıcı masaüstü sınıfı kendisini gördüğü anlamına yaşlı (iPhone ve diğer akıllı telefon tarayıcıları, o notu cep telefonu tarayıcısı do ekran kategorisinde varlık olarak kendilerini tanımlamak) veya bir ekran okuyucusu - ve görüntüleyen olduğunu yazdırmak yerine ekranda görünmesini sağlayın.

2. max-width: 1024px- tarayıcı penceresinin genişliği (kaydırma çubuğu dahil) 1024 piksel veya daha azdır. ( CSS pikselleri, cihaz pikselleri değil .)

Bu ikinci test, bunun CSS'yi iPad, iPhone ve benzer cihazlarla sınırlandırmayı amaçladığını gösteriyor (çünkü bazı eski tarayıcılar max-widthmedya sorgularında desteklenmiyor ve birçok masaüstü tarayıcısı 1024 pikselden daha geniş çalıştırılıyor).

Bununla birlikte, max-widthmedya sorgusunu destekleyen tarayıcılarda 1024 pikselden daha geniş masaüstü tarayıcı pencerelerine de uygulanır .

İşte Media Queries spesifikasyonu, oldukça okunabilir:

• http://www.w3.org/TR/css3-mediaqueries/

Orada tanımlanan stilleri ekranla sınırlar (örneğin, baskı veya başka bir medya) ve kapsamı 1024 piksel veya daha az genişlikteki görüntü alanlarıyla sınırlar.

http://www.css3.info/preview/media-queries/

Şöyle diyor: Sayfa ekranda maksimum 1024 piksel genişliğinde çözünürlükte oluşturulduğunda, aşağıdaki kuralı uygulayın.

Bildiğiniz gibi, bazı CSS'leri elde taşınır cihaz, ekran, yazıcı vb. Ortam türlerine hedefleyebilirsiniz.

Detaylar için buraya bir göz atın ..

Benim durumumda, tarayıcım 800pxveya daha az olduğunda logomu bir web sitesinde ortalamak istedim , o zaman @mediaetiketi kullanarak bunu yaptım :

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

Benim için çalıştı, umarım biri bu çözümü faydalı buluyor. :) Daha fazla bilgi için bkz: bu .

Bu Medya Sorguları . CSS kurallarının bir kısmını yalnızca belirli yapılandırmadaki belirli cihazlara uygulamanızı sağlar.

Bu, ekran boyutunun 1024 olması durumunda yalnızca aşağıdaki CSS kurallarının geçerli olduğu anlamına gelir.

Medya sorgu koşulunuz doğruysa, bu koşullu CSS'niz çalışır. Bu, medya sorgunuzun durum pikseli boyutundaki CSS'nin etkili olacağı anlamına gelir; aksi takdirde koşulun başarısız olması, cihazın genişliği CSS'nizden 1024px'den büyükse işe yaramayacağı anlamına gelir.

max-width bu genişliğe kadar olan maksimum CSS sınırınızdır.

Ayrıca 'em' yanı sıra 'px' kullanabilirsiniz - bloglar ve metin tabanlı siteler bunu yapar çünkü o zaman tarayıcı metin içeriğine göre düzen kararları daha yapar.

Wordpress yirmi altıda, sloganımın cep telefonlarının yanı sıra masaüstlerinde de görünmesini istedim, bu yüzden bunu çocuk temam stiline koydum. Ccs

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}

Bazı kodları yürütmek için belirli bir özelliği hedefler ...

Örneğin:

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

yukarıdaki snippet, bu programı çalıştıran cihazın 600 piksel veya 600 piksel genişlikten daha küçük bir ekrana sahip olup olmadığını söyler, bu durumda programımızın bu bölümü yürütmesi gerekir.