WordPress’te çalışmayan medya sorguları nasıl geliştirilir
Kolay erişim ve okunabilirlik için, site içeriği her tür ve boyutun ekranına uyacak şekilde ayarlanmalıdır. Bu Web Tasarımcısı’nı başarmanın bir yolu, Media sorgusu adı verilen bir CSS tekniği kullanmaktır. Bu teknik, sayfaların oryantasyon (peyzaj veya portre) cihazına veya ekran boyutuna göre düzenlenmesine yardımcı olmasına rağmen, WP sitenizde işleyen medya sorguları yapmakta sorunlar yaşayabilirsiniz. Eğer sizin için varsa, iki seçeneğiniz var – kendinizi düzeltmeye çalışın veya tamamlamak için deneyimli bir WP uzmanıyla iletişime geçin. Kod ile çalışmak çok rahat değilseniz veya daha üretken sorunlara odaklanmak için yalnızca ekstra zamana ihtiyacınız varsa son seçenek çok daha iyidir.
Bu yazıda, medya kuyruğunun ne olduğunu, ne zaman kullanılacağını ve çalışmadığında ne yapacağımızı kısaca göreceğiz. İçindekiler:
CSS Medya Sorgularının Tanımı ve Kullanımı
Medya nasıl görünür
Medya kuyruğunu nasıl düzeltilir çalışmaz
Çözüm
İlk CSS medya sorgularının tanımı ve kullanımı, sizi CSS medya sorgularından getireceğiz. Ancak, sadece medyanız çalışmadığında ne yapacağınızı bilmek istiyorsanız, aşağıdaki ilgili bölüme geçin. Daha önce de belirttiğimiz gibi, medya sorguları, ekranı (yazı tipi boyutu, renk stili, vb.) Sayfa içeriğini çeşitli boyutlarda ve ekran çözünürlüğünde ayarlamak için kullanılan CSS (basamaklı stil sayfaları) teknikleridir.
Her web sitesi sahibinin temel amacı, siteyi ziyaret eden herkese en iyi deneyimi sunmaktır. Masaüstü kullanıcıları, iPhone ve akıllı telefon kullanıcılarının yanı sıra olağanüstü kullanıcı deneyimine sahip olmalıdır. Yani medya kuyruğunun devreye girdiği yer burası. Bu temel olarak sayfaları görüntülemek için mobil cihaz kullanıldığında tarayıcının ne yapılması gerektiğini ve daha büyük bir cihaz kullanıldığında ne yapılması gerektiğini söyler. Bu, medya sorgularının basit bir örneğidir: @media ekranı ve (maksimum genişlik: 480px) {header {yükseklik: 70px; } makale {yazı tipi boyutu: 14px; } img {max-width: 480px; }} HTML web sayfasına girilebilir veya .css ayrı dosyasında bildirilebilirler. Medya sorgularının kullanımı şunları içerir:
Sütunun genişliğini cihazın ekran boyutuna göre ayarlayın: Sütunun genişliğini ve ilgili öğeleri ayarlamak için CSS medya sorgularını kullanabilirsiniz. Bu, tüm ziyaretçiler için en iyi kullanıcı deneyimini sağlayacaktır.
Düzeni Değiştir: Mobil cihazlar için 2 sütunu 1 sütun düzenine dönüştürmek için CSS Medya Sorgularını da kullanabilirsiniz.
Yan çubuğu hareket ettirme: Bir medya sorgusu bildirerek, tarayıcıya sayfa mobil cihazda veya portre modundayken sayfa görüldüğünde site içeriği altında yan bıçakları hareket ettirmesini söyleyebilirsiniz.
Medya sorgularını düzgün kullanmak için medya sorgularının sözdizimi, sözdizimini anlamak önemlidir.
Medya sorguları aşağıdaki dört öğeye sahiptir:
@Media Düzenleme
Medya türü (bu isteğe bağlı)
Mantık Operatörü
Medya Özellik İfadeleri.
@Media Düzenleme: CSS’de medya sorguları hazırlarken yapılacak ilk şey ne yapmak istediğinizi beyan etmektir. Bunu yapmak için, aralarında boşluk olmadan @media girin. Medya Türü: @Media kurallarını izleyen bir sonraki öğe medya türüdür. Bu, kuyruğu ayarladığınız cihaz türünü ifade eder. Medya türü şunları içerir: All: Bu tür medya tüm cihazlar için uygundur. Şöyle belirli medya türlerini kullanmazsanız: @media (Max-Width: 480px), ‘All’ ima edilecektir. Yazdırma: Bu tür medya, sayfalar ve belgeler için bir medya sorgusu hazırlamak istediğinizde kullanılır. Önizleme modunu yazdırın. Ekran: Bu tür medya ekranlar için kullanılır. Takip eden CSS kuralları mobil ekranlara, tabletlere, masaüstlerine vb. Uygulanacaktır. Bu en yaygın kullanılan ortam türüdür. Konuşma: Bu, ekran okuyucuları için tasarlanmıştır. Medya Özellikleri: Medya özellikleri daha spesifik ayrıntılar sağlar. Örneğin, maksimum genişliği 600 piksel (mobil cihazlar) olan bir ekrana bir kuvvet uygulayabilirsiniz. Bu durumda, Max-Width, cep telefonlarını hedeflemek için kullanılan bir medya özelliğidir. Şimdi bazı medya özellikleri ve işlevleri:
Yükseklik – Bu, görünümün yüksekliğini açıklıyor
Max-Hight-Bu, tarayıcı penceresinin maksimum yüksekliğini ifade eder
Genişlik – Görünüm alanının genişliği
Max-Width Bu ortam özelliği, tarayıcı penceresinin maksimum genişliğini belirler
Minimum Yükseklik – Bu, tarayıcı penceresinin minimum yüksekliğini belirler
Oryantasyon – Bu, ViewPort yönünü ifade eder.
Açıklığa kavuşturmak için, medya özelliklerinin her ifadesi parantez içine yerleştirilmelidir. Mantık operatörleri Karmaşık medya sorguları yaparken, şu şekilde mantık operatörlerine ihtiyacınız var: değil ve sadece. Ayrıca birden fazla medya sorgusunu bir virgül kullanarak birleştirebilirsiniz. Ve: operatörler ‘ve’ tek bir medya sorgusu oluşturmak için 2 veya daha fazla medya özelliğini birleştirin. Ayrıca medya türünü medya özellikleriyle birleştirmek için de kullanılır. Değil: Mantık operatörü medya sorgularını ortadan kaldırmıyor ‘. Not operatörünü kullanırken, ortam türü belirlenmelidir. Yalnızca: Bu operatör, eski tarayıcıların medya sorgularını yanlış yorumlamasını önlemeye yardımcı olur. ‘Sadece’ kullanmıyorsanız, medya kuyruğu eski tarayıcıda düzgün çalışmayabilir. ‘Ekran ve (maksimum genişlik: 767px)’ ” ekran ‘olarak yorumlayabilirler, böylece tüm ekranlara kuyruk uygulayabilirler. Bu operatörün modern tarayıcılar üzerinde hiçbir etkisi olmadığını unutmayın. ‘Sadece’ operatörünü kullanırken, medya türü de belirlenmelidir.
, (koma): Koma, 2 veya daha fazla medya sorgusunu tek bir kuralda birleştirmek için kullanılır. Bu, bazı sorguların virgülle ayrıldığında, her sorgunun diğerlerinden ayrı olarak ele alındığı anlamına gelir. Dolayısıyla, listedeki bir sorgu doğruysa, tüm medya kuyruğu doğru kalır. Ortak Medya Sorguları Örnekleri Hala nasıl bir medya kuyruğunun nasıl olduğunu merak ediyorsanız, bunların çoğunu Duyarlı WordPress temasından style.css dosyasında görebilirsiniz. @Media ile başlarlar ve genellikle stil tabakasının altında bulunurlar.
Bunun nedeni, kuvvet sayfasının altındaki kuralların en üstteki kurallara gelmesidir (etiketleri kullanmadığınız sürece! Bunun olmasını önlemek için önemlidir).Aşağıdakiler bir örnek: sadece @Media ekran ve (maks.}} Yukarıdaki örnekte, sorgu, ekran boyutu 600 piksel veya daha az olduğunda öğesinin arka plan rengini yeşil olarak değiştiren koşulları belirleyen koşulları ayarlamıştır.Bu nedenle, arka plan renginiz orijinal olarak ‘beyaz’ olarak ayarlanmış olsa da, tasarım medya sorguları nedeniyle mobil cihazlar için ‘yeşil’ olarak değişti.Yani ‘600px’, tasarım öğelerinizin farklı davranacağı bir dinlenme noktasıdır.İşte başka bir örnek: @media ekranı ve (maksimum genişlik: 850px) {.column {genişlik:%50;}} @Media ekranı ve (maks.}}
İlk sorgu ortamı, tarayıcıya ekran 850px aşağı olduğunda tarayıcının veya kap penceresinin% 50 sütun genişliğini yapmasını söyler. İkinci medya sorgusu daha sonra tarayıcıya ekran genişliği 600 piksel aşağı olduğunda sütun genişliğini% 100’e ayarlamasını söyler. Bir sonraki bölüm, medya kuyruğu işe yaramadığında ne yapılacağını açıklar. Medya sorgularının nasıl iyileştirileceği çalışmaz, medya sorgularıyla çalışırken hatalar deneyimlemek mümkündür. Ancak, bazen medya sorguları hiç çalışmayabilir, diğer zamanlarda mobil cihazlarda veya masaüstlerinde çalışmayabilir. Bu nedenle, medya sorgularınızı hazırladıktan ve çalışmadıktan sonra aşağıdakileri yapın: Konumun doğru olduğundan emin olun, bazen medya sorgularınız çalışmıyor çünkü konum yanlış. İdeal olarak, medya sorguları stil sayfasının sonuna yerleştirilmelidir. Bildiğiniz gibi, tarayıcı yukarıdan aşağıya stil sayfasını okur. Dolayısıyla, stil sayfasının sonundaki kod başlangıçta yapılan beyanname olur (kodun uygulanmasını zorlamak için önemli kullanılır). Ayrıca, daha küçük sorgular için medya sorguları daha büyük bir ekranın önüne yerleştirilmelidir. Aşağıdaki satıra bakın: Body {Arka Plan Color: Gri; } @Media ekranı ve (min genişliği: 480px) {body {background-color: yeşil; }} @Media ekranı ve (min genişliği: 850px) {body {background-color: LightBlue; Metin-align: merkez;
}} İlk kural, 480 pikselden azsa sayfanın arka plan rengini gri olarak ayarlar. Medya sorguları daha sonra arka planı 480-849 piksel arasında bir ekran-bir ekran için ayarlayın ve arka plan rengini açık maviye ayarlarken, aynı zamanda metni 850 piksel ekran ve daha fazlası için hizalayın. CSS, bu satırın medya sorgularınızın çalışmamasının nedeni olabileceğini açıkladı. Yani, HTML belgenizde CSS beyan etmiş olabilirsiniz. Yani sorun bu ise, sadece HTML belgesini açın ve hatta bildirilen CSS’yi silin. Veya bir CSS hattını! Önemli ile değiştirebilirsiniz. Sonuç olarak, bu ‘CSS medya kuyruğu çalışmıyor’ sorununu çözebilir. Mobil cihazdaki paragraf için metnin rengini bu CSS hattı ile siyah olarak değiştirmeye çalıştığınızı söyleyin. @Media ekran ve (maksimum genişlik: 1024px) {p {color: siyah; }} Ancak bu başarısız, şansın aynı öğeye stil çizgisinin uygulanmasıdır. Bu nedenle, bu kural için aşağıdaki stile sahip olması için önemli!
Bu yazıda, medya kuyruğunun ne olduğunu, ne zaman kullanılacağını ve çalışmadığında ne yapacağımızı kısaca göreceğiz. İçindekiler:
CSS Medya Sorgularının Tanımı ve Kullanımı
Medya nasıl görünür
Medya kuyruğunu nasıl düzeltilir çalışmaz
Çözüm
İlk CSS medya sorgularının tanımı ve kullanımı, sizi CSS medya sorgularından getireceğiz. Ancak, sadece medyanız çalışmadığında ne yapacağınızı bilmek istiyorsanız, aşağıdaki ilgili bölüme geçin. Daha önce de belirttiğimiz gibi, medya sorguları, ekranı (yazı tipi boyutu, renk stili, vb.) Sayfa içeriğini çeşitli boyutlarda ve ekran çözünürlüğünde ayarlamak için kullanılan CSS (basamaklı stil sayfaları) teknikleridir.
Her web sitesi sahibinin temel amacı, siteyi ziyaret eden herkese en iyi deneyimi sunmaktır. Masaüstü kullanıcıları, iPhone ve akıllı telefon kullanıcılarının yanı sıra olağanüstü kullanıcı deneyimine sahip olmalıdır. Yani medya kuyruğunun devreye girdiği yer burası. Bu temel olarak sayfaları görüntülemek için mobil cihaz kullanıldığında tarayıcının ne yapılması gerektiğini ve daha büyük bir cihaz kullanıldığında ne yapılması gerektiğini söyler. Bu, medya sorgularının basit bir örneğidir: @media ekranı ve (maksimum genişlik: 480px) {header {yükseklik: 70px; } makale {yazı tipi boyutu: 14px; } img {max-width: 480px; }} HTML web sayfasına girilebilir veya .css ayrı dosyasında bildirilebilirler. Medya sorgularının kullanımı şunları içerir:
Sütunun genişliğini cihazın ekran boyutuna göre ayarlayın: Sütunun genişliğini ve ilgili öğeleri ayarlamak için CSS medya sorgularını kullanabilirsiniz. Bu, tüm ziyaretçiler için en iyi kullanıcı deneyimini sağlayacaktır.
Düzeni Değiştir: Mobil cihazlar için 2 sütunu 1 sütun düzenine dönüştürmek için CSS Medya Sorgularını da kullanabilirsiniz.
Yan çubuğu hareket ettirme: Bir medya sorgusu bildirerek, tarayıcıya sayfa mobil cihazda veya portre modundayken sayfa görüldüğünde site içeriği altında yan bıçakları hareket ettirmesini söyleyebilirsiniz.
Medya sorgularını düzgün kullanmak için medya sorgularının sözdizimi, sözdizimini anlamak önemlidir.
Medya sorguları aşağıdaki dört öğeye sahiptir:
@Media Düzenleme
Medya türü (bu isteğe bağlı)
Mantık Operatörü
Medya Özellik İfadeleri.
@Media Düzenleme: CSS’de medya sorguları hazırlarken yapılacak ilk şey ne yapmak istediğinizi beyan etmektir. Bunu yapmak için, aralarında boşluk olmadan @media girin. Medya Türü: @Media kurallarını izleyen bir sonraki öğe medya türüdür. Bu, kuyruğu ayarladığınız cihaz türünü ifade eder. Medya türü şunları içerir: All: Bu tür medya tüm cihazlar için uygundur. Şöyle belirli medya türlerini kullanmazsanız: @media (Max-Width: 480px), ‘All’ ima edilecektir. Yazdırma: Bu tür medya, sayfalar ve belgeler için bir medya sorgusu hazırlamak istediğinizde kullanılır. Önizleme modunu yazdırın. Ekran: Bu tür medya ekranlar için kullanılır. Takip eden CSS kuralları mobil ekranlara, tabletlere, masaüstlerine vb. Uygulanacaktır. Bu en yaygın kullanılan ortam türüdür. Konuşma: Bu, ekran okuyucuları için tasarlanmıştır. Medya Özellikleri: Medya özellikleri daha spesifik ayrıntılar sağlar. Örneğin, maksimum genişliği 600 piksel (mobil cihazlar) olan bir ekrana bir kuvvet uygulayabilirsiniz. Bu durumda, Max-Width, cep telefonlarını hedeflemek için kullanılan bir medya özelliğidir. Şimdi bazı medya özellikleri ve işlevleri:
Yükseklik – Bu, görünümün yüksekliğini açıklıyor
Max-Hight-Bu, tarayıcı penceresinin maksimum yüksekliğini ifade eder
Genişlik – Görünüm alanının genişliği
Max-Width Bu ortam özelliği, tarayıcı penceresinin maksimum genişliğini belirler
Minimum Yükseklik – Bu, tarayıcı penceresinin minimum yüksekliğini belirler
Oryantasyon – Bu, ViewPort yönünü ifade eder.
Açıklığa kavuşturmak için, medya özelliklerinin her ifadesi parantez içine yerleştirilmelidir. Mantık operatörleri Karmaşık medya sorguları yaparken, şu şekilde mantık operatörlerine ihtiyacınız var: değil ve sadece. Ayrıca birden fazla medya sorgusunu bir virgül kullanarak birleştirebilirsiniz. Ve: operatörler ‘ve’ tek bir medya sorgusu oluşturmak için 2 veya daha fazla medya özelliğini birleştirin. Ayrıca medya türünü medya özellikleriyle birleştirmek için de kullanılır. Değil: Mantık operatörü medya sorgularını ortadan kaldırmıyor ‘. Not operatörünü kullanırken, ortam türü belirlenmelidir. Yalnızca: Bu operatör, eski tarayıcıların medya sorgularını yanlış yorumlamasını önlemeye yardımcı olur. ‘Sadece’ kullanmıyorsanız, medya kuyruğu eski tarayıcıda düzgün çalışmayabilir. ‘Ekran ve (maksimum genişlik: 767px)’ ” ekran ‘olarak yorumlayabilirler, böylece tüm ekranlara kuyruk uygulayabilirler. Bu operatörün modern tarayıcılar üzerinde hiçbir etkisi olmadığını unutmayın. ‘Sadece’ operatörünü kullanırken, medya türü de belirlenmelidir.
, (koma): Koma, 2 veya daha fazla medya sorgusunu tek bir kuralda birleştirmek için kullanılır. Bu, bazı sorguların virgülle ayrıldığında, her sorgunun diğerlerinden ayrı olarak ele alındığı anlamına gelir. Dolayısıyla, listedeki bir sorgu doğruysa, tüm medya kuyruğu doğru kalır. Ortak Medya Sorguları Örnekleri Hala nasıl bir medya kuyruğunun nasıl olduğunu merak ediyorsanız, bunların çoğunu Duyarlı WordPress temasından style.css dosyasında görebilirsiniz. @Media ile başlarlar ve genellikle stil tabakasının altında bulunurlar.
Bunun nedeni, kuvvet sayfasının altındaki kuralların en üstteki kurallara gelmesidir (etiketleri kullanmadığınız sürece! Bunun olmasını önlemek için önemlidir).Aşağıdakiler bir örnek: sadece @Media ekran ve (maks.}} Yukarıdaki örnekte, sorgu, ekran boyutu 600 piksel veya daha az olduğunda öğesinin arka plan rengini yeşil olarak değiştiren koşulları belirleyen koşulları ayarlamıştır.Bu nedenle, arka plan renginiz orijinal olarak ‘beyaz’ olarak ayarlanmış olsa da, tasarım medya sorguları nedeniyle mobil cihazlar için ‘yeşil’ olarak değişti.Yani ‘600px’, tasarım öğelerinizin farklı davranacağı bir dinlenme noktasıdır.İşte başka bir örnek: @media ekranı ve (maksimum genişlik: 850px) {.column {genişlik:%50;}} @Media ekranı ve (maks.}}
İlk sorgu ortamı, tarayıcıya ekran 850px aşağı olduğunda tarayıcının veya kap penceresinin% 50 sütun genişliğini yapmasını söyler. İkinci medya sorgusu daha sonra tarayıcıya ekran genişliği 600 piksel aşağı olduğunda sütun genişliğini% 100’e ayarlamasını söyler. Bir sonraki bölüm, medya kuyruğu işe yaramadığında ne yapılacağını açıklar. Medya sorgularının nasıl iyileştirileceği çalışmaz, medya sorgularıyla çalışırken hatalar deneyimlemek mümkündür. Ancak, bazen medya sorguları hiç çalışmayabilir, diğer zamanlarda mobil cihazlarda veya masaüstlerinde çalışmayabilir. Bu nedenle, medya sorgularınızı hazırladıktan ve çalışmadıktan sonra aşağıdakileri yapın: Konumun doğru olduğundan emin olun, bazen medya sorgularınız çalışmıyor çünkü konum yanlış. İdeal olarak, medya sorguları stil sayfasının sonuna yerleştirilmelidir. Bildiğiniz gibi, tarayıcı yukarıdan aşağıya stil sayfasını okur. Dolayısıyla, stil sayfasının sonundaki kod başlangıçta yapılan beyanname olur (kodun uygulanmasını zorlamak için önemli kullanılır). Ayrıca, daha küçük sorgular için medya sorguları daha büyük bir ekranın önüne yerleştirilmelidir. Aşağıdaki satıra bakın: Body {Arka Plan Color: Gri; } @Media ekranı ve (min genişliği: 480px) {body {background-color: yeşil; }} @Media ekranı ve (min genişliği: 850px) {body {background-color: LightBlue; Metin-align: merkez;
}} İlk kural, 480 pikselden azsa sayfanın arka plan rengini gri olarak ayarlar. Medya sorguları daha sonra arka planı 480-849 piksel arasında bir ekran-bir ekran için ayarlayın ve arka plan rengini açık maviye ayarlarken, aynı zamanda metni 850 piksel ekran ve daha fazlası için hizalayın. CSS, bu satırın medya sorgularınızın çalışmamasının nedeni olabileceğini açıkladı. Yani, HTML belgenizde CSS beyan etmiş olabilirsiniz. Yani sorun bu ise, sadece HTML belgesini açın ve hatta bildirilen CSS’yi silin. Veya bir CSS hattını! Önemli ile değiştirebilirsiniz. Sonuç olarak, bu ‘CSS medya kuyruğu çalışmıyor’ sorununu çözebilir. Mobil cihazdaki paragraf için metnin rengini bu CSS hattı ile siyah olarak değiştirmeye çalıştığınızı söyleyin. @Media ekran ve (maksimum genişlik: 1024px) {p {color: siyah; }} Ancak bu başarısız, şansın aynı öğeye stil çizgisinin uygulanmasıdır. Bu nedenle, bu kural için aşağıdaki stile sahip olması için önemli!
}} Yani, bu, medya sorgularınızın sorununu çözecektir.Önceki beyanda, yukarıda gördüğümüz gibi ona bağlı olmuştu! Önemli olan diğer stiller, hatta bir element için ayarlanmış çizgiler bile olabilir.Ayrıca bir öğenin e -tablosunda daha önce önemli olduğunu da kullandıysanız, bundan sonra bildirilen medya sorguları çalışmaz.Yani, yapılacak en kolay şey, medyanızın işlevini yerine getirecek şekilde bulmak ve silmektir.Medya sorguları ideal masaüstünde çalışmaz, medya sorgularınız mobil cihazlarda ve ayrıca masaüstü bilgisayarlarda çalışmalıdır.Ancak, masaüstünde çalışmıyorsa, medya özelliğiniz olarak maksimum cihaz genişliği yerine maksimum genişliği kullanın.Yani, bu ikisi arasındaki farktır.Max-Aygıt-genişlik: Bu, cihazın gerçek ekran boyutunu ifade eder.Maksimum genişlik: Bu, cihaz görüntüleme alanının (tarayıcı penceresi) boyutunu ifade eder.
