Duyarlı WordPress Tasarımları için CSS3 Medya Sorgularını Kullanma
WordPress siteniz için duyarlı bir tasarım artık isteğe bağlı değildir – bu bir zorunluluktur. En azından, mobil cihazlar için tam olarak optimize edilmeyen siteleri cezalandıran Google’ın güncellenmiş algoritmasına göre. Ve Google algoritmasının yenilenmesi mantıklı. ComScore’a göre, Cellular, ABD’de harcanan dijital medya zamanının% 60’ına katkıda bulunan akıllı telefonlar ve tabletlerdeki toplam aktivitelerle önde gelen bir dijital platform haline geldi. CSS3 kullanarak, sitenizi duyarlı olacak şekilde güncelleyebilirsiniz. Bootstrap gibi diğer yöntemlerin aksine, CSS3 çok karmaşık değildir ve öğrenmesi ve uygulanması çok daha kolay değildir, ancak Bootstrap’ta CSS de olduğu için, bu hem yeni başlayanlar hem de profesyoneller için incelenecek veya incelenmek için iyi bir düzenleme dilidir.
Bu yazıda, web sitenizi CSS3 ile duyarlı hale getirmek için atmanız gereken adımları tartışacağız. Duyarlı ve Hücresel Dostluk “Duyarlı” ve “Hücresel Dostu” terimi, siteyi tanımlarken genellikle dönüşümlü olarak kullanılır, ancak sitenizin iyi görünmesi için gereken gereksinimleri karşılamasını sağlamak için iki kelimenin gerçek anlamını anlamak önemlidir. Tüm cihazlarda. Tabii ki, duyarlı tasarım tanıma göre hücresel tasarımdan farklıdır. Tam duyarlı tasarım, daha küçük ekranlar için çok uygundur ve boyutlandırılmış simgelere, görüntülere ve diğer öğelere sahiptir, böylece vurduğunuzda kolayca görülür ve kullanılır.
Hücresel dostu bile olmayan siteler hiç kullanıcı dostu değildir. İdeal olarak, sitenizin duyarlı olmasını ve sadece hücresel dostu değil. Neyse ki, CSS3, tamamen duyarlı bir tema ve site içeriği oluşturmanıza yardımcı olacak bir aracı olan @media kurallarını içerir. @Media kural nedir? CSS’ye yanıt veren WordPress sitenizi oluşturmak için @media kurallarını kullanmanız gerekir. Bu özellik bu örnekte olduğu gibi diğer stilleri çevreledikçe, kıvırcık parantez ile normal stil ile neredeyse aynı şekilde kullanacaksınız: Jennimckinnon/BAC72AE504433fd4fa3e’nin çekirdeğini içerir
Bu yapı ile, ekli öğe @media tarafından belirlenen kuralları takip eder. Cep telefonları ve tabletler, yazıcılar veya ekran okuyucuları gibi görüntülenecek ortam türünü belirleyebilirsiniz. Medya türünü seçtikten sonra, değeri ifade ile boyut açısından ayarlayabilirsiniz. Bu CSS kurallarıyla, sitenizi görmek için hangi cihazın kullanıldığına bağlı olarak tarayıcıya belirli içeriği görüntülemesini söyleyebilir. Bu, sitenizi, cihazı kullanan ziyaretçiler tarafından görülebilen daha küçük bir cep telefonu ve tablet ekranında iyi görülebilen diğer stillerle birlikte bir masaüstü sürümü – veya eksiksiz – oluşturabileceğiniz anlamına gelir. tarayıcılar ve herkes tarafından rahatça görülebilir. Aslında, tüm ana tarayıcılar bir süredir @media kurallarını görüntüleyebildi. Aşağıdaki detaylar, her tarayıcının onu destekleyen ilk sürümü:
Chrome – 21.0
Safari – 4.0
Firefox – 3.5
Kenar – 12.0
Internet Explorer – 9.0
Opera – 9.0
Duyarlı bir site oluştururken CSS ile yapabileceğiniz birçok şey vardır ve duyarlı olmak istediğiniz medya türünü seçmekle başlar. Ekranı tanımlamak önce farklıdır, önce: Bir hata yaparsanız ve orijinal sürümünüzü kurtarmanız gerekiyorsa Style.css dosyanıza güvenli bir şekilde saklanacak şekilde başlayın. Dosya açıldıktan sonra ve @Media yazdıktan sonra, hemen yanına medya türünü eklemeniz gerekir.
Hiçbir şey eklememeye karar verirseniz, varsayılan, bir sonraki adımda tanımladığınız her türlü ekran veya belirli boyutlardır. Hepsini de kullanabilirsiniz. Ortam türü için sahip olduğunuz diğer seçenekler şunlardır: ekran – bunu cep telefonlarından ve tabletlerden dizüstü bilgisayarlara ve masaüstlerine kadar herhangi bir ekran için kullanabilirsiniz.
Baskı – Bu yazıcılar için kullanılır. Bu tür bir ortamla yazıcı dostu bir sayfa sürümü oluşturabilirsiniz.
Konuşma – Bu tür medya, sayfaları analiz eden ve metin içeriğini görme bozukluğu olanlar için yüksek sesle okuyan ekran okuyucuları için kullanılır.
Medya türünden önce, girdiğiniz medya türü olmayan herhangi bir ekran için stili görüntülememeye veya yalnızca stili yalnızca ayarladığınız medya türü için görüntülememeye de girebilirsiniz. Bundan birini kullanırsanız, bu artık isteğe bağlı olmadığı için bir tür medya türü de eklemeniz gerekir.
Tüm bunları göz önünde bulundurarak, şimdiye kadar buna benzeyen bir şey yazabilirsiniz:
Jennimckinnon/629F0269CA342277592E’nin çekirdeğini içerir
Bir sonraki ekran boyutu için stil, daha spesifik olabilir ve daha sonra girdiğiniz kuvveti uygulamak için gereken ekran boyutunu belirleyebilirsiniz. Medya türünden sonra, girin ve sonra bir ifade ile takip edin. Birkaç ifade kullanırsanız, her şey de ayrılmalıdır. Bu durumda, ifadeler boyut gibi ortam özellikleri eklemek için kullanılır ve braketler arasında dahil edilir. Bir ifade eklemeyi bitirdiğinizde, kıvırcık parantezlerinizi yazın ve ayarladığınız ortam türü için tasarımınızı düzenlemek için CSS’nizi ekleyin.
Bu birleştirilmiş gibi görünüyor:
JennimckKkinnon/A02057198DDDD6DF27935’in özünü içerir
Bu örnekte, maksimum 1024 piksel kullanıyorum. Bu, iPad ekran boyutuna maksimum genişliği ayarladığım anlamına gelir. Belirli ekran boyutlarını belirlemek için ifadeyi bu şekilde kullanabilirsiniz. Neden bunu doğru yapmak istiyorsun? Aşağıdakilerden birini ifade olarak kullandığınızda, farklı mobil cihazların site tasarımınızı ve içeriğinizi nasıl gördüğünü kontrol edebilirsiniz:
@Media kurallarında ayarlanan stilin görüntülenmesine izin verilen ortam türünün ekran genişliğinin maksimum genişliği. Daha büyük ve güç ne olursa olsun gösterilmeyecektir.
Min-genişlik-bu yukarıdakilerin tersidir. Bu, geniş ekran tipinin minimum boyutunu ayarlar. Daha küçük ve güç ne olursa olsun görüntülenmeyecektir.
Maks-yükseklik-bu, ekli stilin görüntülenebilmesi için medya ekranının türüne sahip olabilecek maksimum yüksekliği ayarlar.
Min-yükseklik-ekran için minimum yüksekliği ayarlayabilirsiniz. Ekran girdiğiniz miktarla aynı veya daha büyükse, ekli kuvvet cihazda görüntülenir.
Genellikle, genişlik genellikle düzenlenir ve gerektiren belirli bir kuvvetiniz olmadığı sürece yüksekliği görmezden gelebilirsiniz. Tüm cihazların sayfadaki tüm içeriği görmek için yukarı ve aşağı kaydırmayı amaçladığını unutmayın ve bu yüzden genellikle kullanılmaz.
Mobil cihazlar için çeşitli ekran boyutlarının genişliğini bildikten sonra, seçtiğiniz belirli cihazlar için temalarınızı ve içeriğinizi düzgün görüntülenecek şekilde kolayca düzenleyebilirsiniz. İşte en popüler cihazlar için ekranın genişliği için hızlı bir referans:
iPhone – 640px
iPad – 1024 Pixeltablet – 1366px
Android Telefon – 640px, 720px, 854px, 960px en yaygın boyuttur
Ekstra Büyük Android Telefonlar – 1024 piksel veya 1066px
Daha küçük pencereler – 480px
Daha büyük Windows Telefonlar – 768px
Daha küçük ve eski telefonlar – 320px
Netbook’lar ve küçük masaüstü bilgisayarlar – 128px
Ultrabook/Dizüstü bilgisayar – 1366px
Masaüstü ve TV – 1920px
Bu ekran genişliğini medya ekranı için kullanıyorsanız, sitenizin tüm cihazlarda harika görünmesini sağlamak için doğru yoldasınız.
Kullanabileceğiniz ifadeler ve diğer medya özellikleri şeklinde birçok hazine vardır.Örneğin, sadece birkaç tanesini belirtmek için medya türünüz için çözünürlük, renk oranını ve renk dizinini de belirleyebilirsiniz.İşte size nasıl kullanabileceğinize dair daha iyi bir resim sunmak için bu medya özelliğinin görüntülenmesine bir örnek:
Jennimckinnon/BCB5D71EB7E0E285bde0’ın çekirdeğini içerir
Bu örnekte, içerik stilini görüntülemek için, ekran boyutunun, cihazlar için minimum 16: 9 en boy oranı olan minimum 1920 piksel genişliğine sahip olması gerekir. Basitçe söylemek gerekirse, bu kod sadece yüksek tanımlı videoları görüntülemek için çok iyi olan TV’ler ve büyük masaüstü ekranlar için stilleri görüntülemek için çok uygundur. Mevcut tüm listenin tam bir listesini görmek için bkz. W3Schools ve Mozilla geliştirici sitesi. Sitenizin duyarlılığını test edin, tamamlandıktan sonra, gerçekten birkaç veya tüm ekran boyutunda çalıştığından emin olmak için ne yaptığınızı test etmek önemlidir. Cihazınız varsa, kolayca açabilir ve test edebilirsiniz, ancak her şeye sahip değilseniz bu zor olabilir. Neyse ki, uygun olduğundan emin olmak için tarzınızı ve sitenizi test etmenin birçok yolu vardır. Firefox için Chrome Penceresi Resizer Tarayıcı Uzantısı, Duyarlanabilirlik veya ResisiMe Safari ve Fire Resizer veya Pencere Reserer’ı kullanabilirsiniz. Tarayıcınıza Uzatma veya Addon Değiştirme Boyutu Eklemek, sitenizin yanıtını test etmenin pratik bir yoludur.
Ayrıca, ücretsiz kullanabileceğiniz birçok çevrimiçi mobil cihaz emülatörü de vardır.
LisportPx
Sanırım bu site şimdiye kadar site yanıtını kontrol etmek için favorim çünkü örnek ekranını istediğiniz boyut olarak değiştirebilirsiniz. Bu, en azından yanıt verme açısından site testi için neredeyse çok yönlü bir mağazadır. Bu sitenin, sayfanın üstüne girdiğiniz URL’yi görüntülemek için bir çerçeve kullandığını bilmeniz önemlidir, böylece çerçevedeki yüklemeyi devre dışı bırakmak için kodlanmışsa bazı siteler hiç görüntülenmez. ResponsivePx ile ilgileniyor mu? Detaylar
İPad baktı
Detaylar
Mobil emülatör Bu, eski ve daha küçük bir cep telefonunun boyutunu test etmek için harika bir araçtır. Sitenizin menüdeki açılır kutudan seçtiğiniz cihazda tam olarak nasıl görüldüğünü kolayca görebilirsiniz. Ayrıca, oldukça eğimli görünen şeyler bulursanız neyi değiştirmeniz gerektiğini bulmanıza yardımcı olacak telefon özellikleri de görürsünüz. İyi haber şu ki, tüm siteler bu araçla yüklenebilmelidir. Mobil emülatörlerle ilgileniyor musunuz?
Detaylar
Ekran uçuyor Bu site, masaüstünden Kindle Fire, Samsung Galaxy Tab ve Google Nexus 7, birçok cep telefonu ve televizyon türü gibi belirli bir boyutta siteleri yükleyebilir.Ayrıca, bir tablet ve akıllı telefondaki peyzaj ekranı ve hatta sonuçlarınızı paylaşmak için özel bir bağlantı için yan tarafındaki pencerenin örnek alanını girebileceğiniz, yenileyebileceğiniz, açabileceğiniz özel boyutlar gibi diğer mevcut seçeneklere de sahiptir.Bu site, çerçevedeki görünümünü devre dışı bırakan herhangi bir site ile düzgün çalışmaz, bu nedenle bu sitenizi tanımlıyormuş gibi ses çıkarıyorsanız unutmayın.Screenfly ile ilgileniyor mu?
Sitenizi test ettikten ve tüm cihazlarda iyi görünümünden memnun kaldıktan sonra, deneyebileceğiniz bir test daha vardır ve bu önemlidir: Google mobil dostu siteleri test etmek.
Mobil dostu site testi size siteniz hakkında oldukça ayrıntılı bir rapor sunar. Tek yapmanız gereken sitenizin URL’sini girmek ve bu araç bir rapor görüntüler ve bir geçiş/hata puanı görüntüler. Sınavı geçerseniz, siteniz Google algoritması tarafından cezalandırılmayacak ve hatta sıralamanızı artırabilir. Kodlama ile çok ilgilenmiyorsanız veya burada öğrendiğiniz yeni becerileri kullanmak istiyorsanız bile, ilk temamıza bakın. Bu, sınırsız ayarlanabilir, sitenizin yanıtını test etmek için varsayılan bir hücresel ekrana sahiptir ve HTML veya CSS hakkında biraz bilgi sahibi bir site oluşturabilirsiniz. Ayrıca bazı kodlamalarla da güçlü değişiklikler yapabilirsiniz. Sitenizin duyarlı olmasını sağlamak çok önemli olduğundan duyarlı olmaya hazırsınız çünkü gittikçe daha fazla insan farklı ekran çözünürlüğü ile büyümeye devam eden cihazlarda web’e erişiyor. Daha fazla CSS3 ilhamı istiyorsanız, duyarlı bir web sitesi tasarım çalışması olan medya sorgularına bakın. Bu makaledeki tüm araçlar ve bilgilerle, sitenizi CSS3 ile duyarlı hale getirmek için ihtiyacınız olan her şeye sahip olmanız gerekir. Bittiğinde, sadece yanıt verme gereksinimlerini karşıladığınızdan emin olmak için sitenizi de test edebilirsiniz. Diğer CSS öğreticileri için sitenizi ayarlamak için diğer yayınlarımızdan bazılarına bakın: CSS Sprite ile WordPress’e sosyal medya simgeleri ekleyin, @font-face ve CSS3 ile WordPress’e özel yazı tipleri ekleyin ve resimlerinizin çok kolay ve seksi CSS stili görünmesini sağlayın. Bu öğretici ile duyarlı bir site oluşturdunuz mu? Duyarlı siteler için amacınız nedir? Düşüncelerinizi aşağıdaki yorumlarda paylaşın.
Etiket:
CSS tasarım
