Bu çok basit CSS aracıyla belirli cihazlar için medya kuyruğu üretin
Duyarlı web tasarımını anlamaya çalıştıysanız, hayal kırıklığı yaratabileceğini ilk elden bileceksiniz. Sitenizin neredeyse tüm cihazlarda iyi göründüğünden emin olun, zor bir görevdir. Dahası, site tasarımınızın belirli cihazlarda nasıl görüneceğinden emin değilim, zıplayan ziyaretçilerle sona erebilir. CSS medya sorguları, duyarlı web siteleri oluşturulmasına yardımcı olmanın basit bir yoludur. SimpleCss, kesme noktanıza veya platformunuza göre sizin için bir medya sorgusu üreten çevrimiçi bir araçtır ve bu yazıda, bunu üç tıklamada nasıl üretebileceğinizi göstereceğiz. Tamamlamak için, Divi’nin medya sorgularını kutunun dışındaki nasıl uyguladığını da göstereceğiz.
CSS Media CSS Media Media CSS’ye Giriş Duyarlı bir Web Tasarım Vakfı Teknolojisidir. CSS @media etiketi, farklı türlere ve medya cihazlarına göre stil kurallarını ayarlamak için kullanılır. Basit İngilizce’de, medya sorguları, web sayfalarınıza erişen cihazın yeteneklerini değerlendirir ve mülkü kontrol eder. Bunlar genellikle dahildir:
Viewport’un genişliği ve yüksekliği.
Cihaz çözünürlüğü.
Cihaz yönü.
Duyarlı web tasarımı, sitenizi farklı cihazlarda kullanıma adapte etmeye odaklanır. Örneğin, sitenizi gezmek için fareyi kullanan ziyaretçiler arasında dokunmatik ekranla birlikte kullanıcı deneyiminde önemli farklılıklar vardır. Medya sorguları, web geliştiricilerinin site tasarımındaki boşluğu kapatmalarına olanak tanır:
Web sitenize erişen yüzlerce cihazın her birini uygunsuz olarak karşılamak için site kodunuzu yeniden yazın. Medya sorguları, basit kurallara dayalı olarak cihazın ekran boyutuna ve yönüne ayarlanarak aynı temel HTML kodunu kullanarak çalışır. CSS3, web geliştiricilerinin cihaz sayfasının genişliğine göre kuvveti belirlemelerine olanak tanır. Cihazın sayfasının genişliği boyutu ile ilişkili olduğundan, geliştiriciler temel olarak medya sorgularına koşullu kurallar ekleyerek çeşitli ekran boyutlarına sahip cihazlar için farklı düzeni belirleyebilir. Koşullu kuralları yazmak için kullanılan en yaygın ifadelerden bazıları min genişliği, maksimum genişlik ve oryantasyondur. Medya kraliçesini kullanmanın faydaları, medya kuyruğunu kullanmanın temel yararı, web sitenizin kullandıkları cihazdan bağımsız olarak herkes tarafından kolayca görülmesidir. Teknik açıdan bakıldığında, medya sorguları tüm ana tarayıcılarla uyumludur ve arama motoru ürünlerinde sitenizin daha iyi sıralanmasına yardımcı olma potansiyeline sahiptir. Medya sorgularını kullanarak bazı ek avantajlar:
Mobil cihazlarda potansiyel performans iyileştirmesi.
Hücresel öncelik veren duyarlı tasarımlar oluşturmanıza izin verir.
Ziyaretçiler için potansiyel kullanıcı deneyimleri sağlarlar.
Sitenizin optimize edilmiş sürümünü cihazlar için görüntüleme yeteneği.
İdeal ortam, belirli sayfa öğelerini her duyarlı hale getirmek için her ihtiyacınız olduğunda kullanılmalıdır. Örneğin, siteniz üç sütun tasarımına ayrılırsa, bir akıllı telefon gibi daha küçük bir ekranda okunmayacaktır. Medya sorguları, daha küçük bir ekran için düzeni bir sütunun tasarımına değiştirmenize olanak tanır. Elbette SimpleCSS araçlarını tanıtmak, bu medyanın tüm sorgularını hızlı bir şekilde sorun olabilir. Simplecss, belirli cihazlardan gelen tüm ağır yükleri ortadan kaldırmaya ve koşullu ifadelerle oynamayı ortadan kaldırmaya yardımcı olmak için çok kullanışlı bir araçtır. Haydi bakalım! Basit
Adından da anlaşılacağı gibi, SimpleCSS, web tasarımcılarının ve ön uç geliştiricilerin belirli cihazlar için medya sorguları üretmesine izin veren kullanımı kolay bir araçtır. Cihazı seçtikten sonra, bu araç belirli bir aygıta uyarlanmış bir medya sorgusu yayınladı ve daha sonra CSS dosyanıza eklenebilir. Simplecss ayrıca geçici durağa dayalı medya sorguları üretir.
Ana özellik: Hücresel öncelik veren ve masaüstlerini önceliklendiren iki farklı yaklaşımdan başlamanıza olanak tanır.
Sorgu üretmek için genel bir cihaz seçmenizi sağlar.
286 farklı cihaz için medya sorguları sunmak.
Fiyat: Ücretsiz | Simplecss kullanarak medya sorgularının nasıl yapılacağı daha fazla bilgi (3 tıklamayla) Şimdi medya sorgularının ne olduğunu gördük ve daha kolay hale getiren araçlar, sadece üç tıklamada medya sorgularının nasıl yapılacağını gösterelim! Adım #1: Yaklaşımınızı Seçin Bir medya sorgusu seçmenin ilk adımı, duyarlı tasarımınıza yaklaşım karar vermektir ve önce mobil veya masaüstü arasından seçim yapmanız gerekir: Seçimde sorun yaşıyorsanız, bu her ikisinin de anlamıdır:
Önce Mobil: Bu yaklaşım, mobil cihazlara odaklanarak, daha büyük bir ekrana sahip cihazdan önce görünüşünüzü ilk için optimize etmenizi sağlar.
İlk Masaüstü: Bu yaklaşım, sitenizin daha küçük pahasına daha büyük bir ekranda iyi görünmesini sağlamak için tasarlanmıştır. Ardından, cihaz türünü seçmelisiniz. Adım #2: Cihazın türünü belirleyin Yaklaşımınızı seçtikten sonra, bir sonraki adım beş farklı kesme noktasından birini seçmektir – küçük telefonlar, akıllı telefonlar, tabletler, dizüstü bilgisayarlar ve masaüstleri. Bu, sitenizin okuyucu cihazları için en uygun düzen sağlamak için değiştiği bir noktadır:
Bu adım basittir – sadece bir medya sorgusu yapmak istediğiniz herhangi bir cihazı tıklayın! Adım #3: Bir cihaz seçtikten sonra medya sorgusunu kopyalayın, Pop-up sermayesi medya sorgularınızı içeren görünür. Buradan, kodu kopyalayın ve CSS dosyanızdaki uygun yere yapıştırın:
Genel medya sorguları üretmek için SimpleCss kullanan belirli cihazlar için bir medya sorgusu nasıl yapılır, ancak belirli cihazlar için yapmanız gerekirse ne olur? Nasıl yapılacağını gösterelim – bir kez daha üç tıklamayla! Adım #1: Cihazınızın ilk işletim sistemini belirleyin, ortam sorgularını yapmak istediğiniz cihazın işletim sistemini seçin. SimpleCSS iOS, Android ve Windows’u destekler. Bonus olarak, kullandığınız ekran için bir ortam sorgusu da yapabilirsiniz! Adım #2: Cihazınızı seçin işletim sistemini seçtikten sonra, mevcut cihaz seçeneklerini filtrelemeniz gerekir. SimpleCSS’de desteklenen 286 farklı cihaz vardır ve seçim biraz aşırısa (özellikle Android cihazlar için), seçenekleri daraltmak için bir arama çubuğu kullanabilirsiniz:
Adım #3: Medya sorgusunu kopyala İlgili cihazı tıkladıktan sonra, bir kez daha, panonuza kopyalanmaya hazır yaptığınız medya sorgularını içeren bir açılır sermaye sunulacaksınız: Sadece bu! Artık medya sorgularını manuel olarak yapmanıza gerek yok ve siteniz duyarlı olmak için bir adım daha yakın olabilir. Divi temasının tasarım ve duyarlı bölünmesi, medya sorgularına dayalı duyarlı tasarımlar uyguladık, yani kendiniz yapmanız gerekmeyebilir. Tarayıcı pencerenizin boyutunu değiştirdiğinizde ne olacağını görmek için bu örneğe bakın: Tema, medya sorgularının kullanımının arkasındaki öncül olan değişen pencere boyutuna dinamik olarak uyum sağlar. Tarayıcı pencere genişliğiniz azaldığında, düzen değişiklikleri içeriğin okunmasının hala kolay olmasını sağlar. Üç farklı kesme noktası harekete geçer ve sıvı gibi divi nüanslarının düzenini sağlar. Farklı bir durdurma noktasında, tetiklenen medya sorguları uygulanacak ve tasarım düzeni buna göre değişecek. Sonuç Web siteniz duyarlı değilse, arama motoru sıralamasında acı çekmesi muhtemeldir. Sitenizin duyarlı kalmasını sağlamanın bir yolu medya sorgularını kullanmaktır. Geçmişte yapmak zor olsa da, SimpleCss gibi araçlarla hızlı ve basit hale getirin. Üç tıklamada medya sorguları nasıl üretebileceğinizi özetleyelim: Yaklaşımınızı ve cihazınızı veya istediğiniz işletim sisteminizi seçin. Uygun cihaz türünü belirleyin.
Ortaya çıkan medya kuyruğunu kopyalayın ve CSS dosyanıza yapıştırın. Belirli cihazlar için medya sorguları yapma hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünden iletişime geçin ve konuşmaya katılmak için abone olmayı unutmayın! Makale Küçük Resim Ira Yapanda / Shutterstock.com.
