Duyarlı Tasarımda Medya Kueri: Tam Rehber (2021)

CSS Medya Sorguları için Yeni Başlayan Kılavuz’a hoş geldiniz. Bu makalede, bir medya sorgusu, nasıl çalıştığı ve nasıl doğru kullanılacağı hakkında daha fazla bilgi edineceğiz. Popüler inançların aksine, duyarlı tasarımları aşarlar (burada odaklanacak olan bu olsa da). Sonunda, sitenizin davranış şeklini ayarlamak için kendi medya sorgularınızı nasıl uygulayacağınız hakkında bilgi sahibi olmanızı istiyoruz. CSS medya sorguları nedir? Medya sorguları temel olarak koşullu CSS yazmanın bir yoludur. Bu, yalnızca belirli koşullar yerine getirilirse tarayıcı tarafından oluşturulacak olan CSS’yi işaretleme anlamına gelir. En yaygın kullanımı, tarayıcıya belirli bir ekran boyutunun üstünde veya altında web sitesi öğesinin görünümünü değiştirmesini söylemenin bir yoludur. Ancak, aşağıda göreceğimiz gibi, onu kullanmanın başka yolları da vardır.
Bir medya sorgusu nasıl yazıyorsunuz? Peki, medya sorgularını kullanmanın doğru yolu nedir? CSS’de, bu durumda @Media, AT-Lules’in bir parçasıdır. Daha sonra, sorguların uygulanması için hedeflemeye çalıştığınız medya türünü ve karşılanması gereken özellikleri/koşulları eklersiniz. @Media [Media-Type] ([Media-Feature]) {// Custom CSS} Örneğin, aşağıdaki kod snippeti, 320 pikselin üzerinde bir ekrana sahip bir cihazı hedefler. Medya sorgularından kıvırcık parantezlere yerleştirilen her şey, yalnızca koşulu karşılayan bir ekranla cihazdaki tarayıcıda görüntülenir. Buna dinlenme noktası denir, yani tasarımın esas olarak farklı ekran boyutlarına uyum sağlamak için değiştiği nokta anlamına gelir.
@Media ekran ve (min-width: 320px) {// özel CSS} Medya sorgularındaki medya sorgularındaki operatörler CSS, benzer ve kullanabilirsiniz, ya da değil ve aşağıdakiler gibi koşulları birleştiremezsiniz: @media ekran ve (min – Genişlik: 320px) ve (maksimum genişlik: 786px) {// Özel CSS} Yukarıdaki örnekte, orijinal sorguları değiştirdik, böylece yalnızca uygulanacak minimum ekran boyutuna sahip olmakla kalmaz, aynı zamanda daha fazla da geçerli olmayan maksimum . Sadece tüm kuyruklar uygunsa, kuvveti uygular. Bu genellikle eski tarayıcılarla medya sorgularını artırmak için kullanılır. Örneğin, eski tarayıcı @media ekranını ve (min-width: 320px) yalnızca @media ekranı olarak yorumlayabilir ve yanlış şekilde uygulayabilir. Yalnızca sadece @media ekranında ve (min-genişlik: 320px) gibi, modern tarayıcıları olumsuz etkilemezken bu davranışı geliştirmek. Mevcut medya türü, sorgular için en yaygın ortam türü olmasına rağmen, başka seçeneklerimiz var. :
Hepsi – tüm cihazları hedeflemek
Baskı – Basılı önizlemelerde veya medyada görülen belgeler için, içeriği yazdırılması amaçlanan şekilde görüntüleyen
Konuşma – Ekran okuyucuları gibi içerik okuyan cihazlar
Ayrıca birden fazla medyayı sadece birden fazla ekleyerek hedefleyebilirsiniz. @Media Screen, Konuşma {// Özel CSS} Duyarlı tasarım için medya sorguları bağlamında medya özellikleri/koşulları için örnekler, en yaygın medya özellikleri, min genişliği ve maksimum genişlik dahil genişliktir. Ancak, burada daha fazla seçeneğiniz var, örneğin:
Yükseklik – neredeyse genişlik ile aynı ama cihazın yüksekliği için. Ayrıca aralığın belirlenmesi için min-yüksek ve maksimum yükseklik gerektirir.
Oryantasyon – Cihazın portre veya peyzaj modunda olup olmadığına bağlı olarak sorguları uygulamanıza olanak tanır.
Hover – imleci fare ve dokunmatik ekran gibi elemanlara yönlendirmenin farklı yollarına sahip cihazlar için koşullu CSS’nin getirilmesi.
Erişilebilirlik için aşağıdakiler gibi önemli özellikler de vardır:
Örneğin, bu set tarayıcısında bu set olan kişiler için sitenizde animasyonu devre dışı bırakın.
Tercihler tercihleri ​​Bu medya kuyruğu ile tercihlerini düşük veya yüksek olarak ayarlayan kullanıcılar için farklı bir renk şeması belirleyebilirsiniz. Ancak, şu anda onu destekleyen hiçbir tarayıcı yoktur.
Cihaz çözünürlüğünü veya renk derinliğini hesaplama yeteneği ve daha fazlası gibi çok daha fazlası var. Listenin tamamını burada bulabilirsiniz.
Önemli: Meta Etiket ViewPort CSS medya sorguları hakkında Meta ViewPort etiketi hakkında konuşmadan tamamlanacak bir rehber yoktur. Web sitesinin bölümünde ve şöyle görünüyor: Bu nedir? Bu, hücresel tarayıcıdaki görünümün boyutunu sıfırlar. Bu gereklidir, çünkü hücresel tarayıcı genellikle gerçek cihazdan daha geniş bir görüş alanı ayarlar. Bu yüzden, kötü görünmeden ona yanıt vermeyen bir siteye girebilmeleri için. Temel olarak tasarımın doğru kalması için daha geniş bir görünüm portunu simüle ederler. Kaynak Görüntü: Google Meta ViewPort etiketine girdi, bunun gerçekleşmemesini sağlar, böylece medya sorgularınızın da gerektiği gibi çalışması gerekir. Medya kuyruğuna örnekler Şimdi medya sorgularının genel olarak nasıl çalıştığı fikrimiz olduktan sonra, yeni bilgileri teşvik etmek için bazı pratik örnekleri tartışalım. Farklı cihazlar için kesme noktalarını belirleyin Klasik örneklerle başlayacağız. Burada, masaüstü, tablet veya cep telefonunda görüldüğüne bağlı olarak site yazı tiplerinin boyutunu değiştireceğiz. gövde {yazı tipi boyutu: 20px; } sadece @media ekran ve (maks. }} @media sadece ekran ve (maks. }} Bunu yapmak, metnin hala okunabilmesini ve daha küçük bir ekranda aşırı olmamasını sağlayacaktır.
Benzer şekilde yönlendirmeyi kullanarak, sitenin portre veya peyzaj modunda görünüp görünmediğine bağlı olarak davranışı nasıl değiştirebileceğinize bir örnek. @Media sadece ekran ve (oryantasyon: portre) {div {margin-left: 0px; Marj-sağ: 0px; }} @media yalnızca ekran ve (oryantasyon: peyzaj) {div {margin-sol: 10px; Marj-sağ: 10px; }} Portrede, div öğesinde yanına bir marj eklenir. Öte yandan, daha fazla alanın bulunduğu peyzaj modunda, medya sorguları her iki tarafa 10 piksel ekleyecektir. Sizinle soruları düzenlemek, sadece komadan ayırarak birkaç sorgu oluşturabilir. Virgül operatör veya.@Media ekranı ve (oryantasyon: portre), ekran ve (maks. Genişliği: 320px) {div {margin-sol: 0px; Marj-sağ: 0px; }} Bu durumda, portre modundaki veya genişlikteki cihaz 320 pikselden fazla değilse tarayıcı marj uygulamaz. Bir koşulun karşılandığının yeterli olduğunu unutmayın. Ayrıca, özel bir ekranla hedeflemeyi umursamıyorsanız, @Media (Oryantasyon: Portre), (Max-Width: 320px) için sorguları da basitleştirebilirsiniz. HTML ve JavaScript’teki medya sorguları, ancak medya sorguları sadece CSS değildir. En yaygın uygulama olmasına rağmen, HTML ve JavaScript’te kullanmayı da mümkün kılar. Örneğin, aşağıdaki HTML görüntüleri, farklı boyutlara sahip bir ekranda farklı bir stil sayfası içerir.
Bunu farklı tasarım bakımınızı kolaylaştırmak için bunu yapabilirsiniz. Medya sorgularını büyük bir stil sayfasında düzenlemek yerine, daha küçük bir ayrı stil sayfası düzenleyebilirsiniz. JavaScript’te medya sorgularını da kullanabilirsiniz, ancak burada önce bu kılavuzu aşan Window.Matchmedia () aracılığıyla karşılanması gereken koşulları belirlemeniz gerekir. Bunun için örnekler bulabilirsiniz. Medya sorguları için alternatif, öğeleri duyarlı hale getirmek için her zaman medya sorgularını kullanmanız gerekmez. Bazıları kutunun dışında böyle yapılabilir. Flexbox ve ızgara gibi CSS teknolojisi bu amaçla doğrudur. Davranışlarını kontrol etmek için birçok şekilde görünüm sporlarına otomatik olarak uyum sağlayan HTML öğeleri oluşturmanıza izin verir.