Hücresel için Medya Sorgusu – Tüm cihazlar için Duyarlı Medya Sorusu Nasıl Kullanılır
Hücresel dostu yerlere sahip olmak, seçimlerden daha fazla ihtiyaç duyar. Bununla birlikte, web sitesinin hücresel bir versiyonunu oluşturmanın birçok yolu olmasına rağmen, en pratik ve yararlı olanı hücresel için medya sorgularını kullanmaktır.
Duyarlı tasarım ve medya sorguları, web sitenizin otomatik olarak tüm cihazlara ve ekran boyutlarına uyum sağlamasını sağlamak için çözümler sunar. Bunlar, kavramı anladıktan sonra, duyarlı sitelerin yapımını kolaylaştıracak merkezi ve karmaşık bir konudur.Bu kılavuzda, duyarlı tasarımın neyin, nasıl çalıştığını ve onu uygun hale getiren teknolojiyi açıklayacağız. Ayrıca tüm cihazlar için duyarlı medya sorgularının nasıl uygulanacağını ve kullanılacağını tartışacağız ve bazı problem çözme ipuçları sunacağız. Başlayalım!
Bu makalede
Duyarlı tasarım nedir?
Duyarlı tasarım nasıl çalışır?
Duyarlı tasarımda CSS medya kuyruğu nedir?
Tüm cihazlar için medya sorguları nasıl kullanılır
En yaygın ekran boyutu nedir?
Medya sorguları sorununu çöz
Sık sık sorulan sorular
Paketlemek
WP Buffs’taki ekibimiz, web sitesi sahiplerinin, ajans ortaklarının ve serbest çalışan ortaklarının hücresel ve daha fazlası için duyarlı medya kuyruğu hazırlamalarına yardımcı olur. Bir web sitesini yönetmemize veya 1.000 istemci sitesini desteklememize ihtiyacınız var mı, çözümümüz size yardımcı oldu.
Duyarlı tasarım nedir?
Google, hücresel dostluk sitelerin önemini ilk vurgulamaya başladığında, web tasarım topluluğu çeşitli şekillerde yanıt verdi. Otomatik aktarımlı ayrı bir alanda hücresel bir site görüyoruz.
Akıllı telefon dostu bir site sürümü oluşturmak için özel bir hücresel WordPress eklentisi de var. Bazı tasarımcılar neler olduğunu görmezden gelir ve insanların yakınlaştırmaya ve kaydırmaya alışmasını umarlar. Ancak şimdi tercih edilen ve popüler çözüm ‘duyarlı tasarım’ kullanmaktır. Bu terim 2010 yılında Ethan Marcotte tarafından oluşturulmuştur. Bu, erişmek için kullanılan cihaza uygun bir web sitesi oluşturmayı amaçlayan bir web tasarım yaklaşımını göstermektedir.
Daha teknik terimlerle, bu, ‘yanıtlanan’ site öğesinin boyutuna ve konumuna ViewPort olarak adlandırıldığı anlamına gelir. Bu, sitenin görünür olduğu alandır ve cihazın boyutu ve cihaz tarafından kullanılan tarayıcı penceresi ile sınırlıdır. Duyarlı tasarımın amacı, boyutu büyütmeye, kaydırmaya ve değiştirmeye gerek kalmadan ziyaretçiler için siteye mümkün olduğunca rahat erişmektir.
Bunu deneyimlemenin en iyi yolu, bir masaüstü bilgisayarda hücresel duyarlı bir web sitesi açmak ve tarayıcı penceresini farenizle yavaşça daraltmaktır. Bu, kademeli bir tasarım değişikliğini netleştirecektir. (Talimatlar: Burada WP Buffs’ta deneyebilirsiniz.)
Duyarlı tasarım, bir web sitesi oluşturmanın bir yoludur, böylece onu görüntüleyen herhangi bir cihazın boyutlarına otomatik olarak ayarlanır. #Wordpress tweet için tıklayın
Duyarlı tasarım nasıl çalışır? Übsan
Duyarlı tasarım birkaç ana ilkeye dayanmaktadır. En önemlisi, mutlak boyut yerine orantılı ölçümlerin kullanılmasıdır. Bu, web sitesi öğesinin piksel gibi statik birimler değil, yüzde ve diğer duyarlı ölçümlerde ifade edildiği anlamına gelir.
Aşağıda, site öğelerinin boyutunun nasıl bildirildiğine bir örnek verilmiştir:
.Isi {genişlik: 780 piksel; } Rijit ızgaralar üretmek için boyutun bu şekilde bildirilmesi (ızgara, başlıklar, altbilgi, içerik, kenar çubuğu vb. Sonuç olarak, web sitesini görmek için kullandığınız cihazın boyutu ne olursa olsun, her zaman aynı görünecek ve daha küçük bir ekrandaki insanlar tüm parçaları görmek için kaydırmalı ve büyütmelidir.
Bugün, ızgara sıvısı olarak adlandırılan şeye sahibiz. Orantılı ölçümler kullanır ve böylece tam tersi değil, görünüm alanının boyutuna ayarlanabilir. Aşağıda CSS’deki görünümün bir örneği:
. İlk {maksimum genişlik:%68; }
Buna ek olarak, duyarlı tasarım, mobil kullanıcılardan farklı kullanım kalıplarını, özellikle de bir fare veya izleme çantası değil, dokunuş kullanımını dikkate almalıdır. Bu, düğmenin gelişim efekti, şekli, boyutu ve konumunu ve menü öğeleri gibi tıklanabilen diğer öğeleri, kullanılabilmesi için dikkate almayı gerekli kılar.
Duyarlı tasarımda CSS medya kuyruğu nedir?
Duyarlı tasarımın özü CSS’dir. Bilmeyenler için, bu bölüm bir web sitesinin düzenlenmesinden sorumludur. HTML bir çerçeve oluştururken ve JavaScript işlevsellik eklerken, iyi görünen her şey genellikle CSS: yazı tipi türü, boyut, renk – hepsi.
CSS çok önemlidir, çünkü nesnenin boyutunu belirler (gördüğümüz gibi). Burası orantılı boyutumuzu kullanıyoruz. Ancak, web sitesinin hücreselde iyi görünmesini sağlamak için daha önemli bir şey var: CSS Medya Sorguları.
Medya Kueri 2009’dan beri var. Onlar (ve diğer tasarımcıların ve geliştiricilerin) tarzınıza koşullar eklemesine izin veren operatörler. Örneğin, tarayıcıya rengi sadece ekran çözünürlüğünde, oryantasyonda (manzara veya portre) veya belirli bir boyutta öğeye uygulamasını söyleyebilirsiniz. Bunun için genel kullanım durumu, tarayıcıya yan tarafı hareket ettirmesini söylemektir. Ekran boyutu aşağıya indikten sonra ana içerik altında, örneğin 600 piksel. Aşağıdaki tüm cihazlar için doğru kesme noktasını nasıl bulacağınız ve doğru duyarlı medya sorgularını nasıl düzenleyeceğimiz hakkında konuşacağız.
Medya kuyruğunun yanı sıra, başka önemli CSS hususları da var. En önemlilerinden biri görüntüler ve daha spesifik olarak, göründükleri alana uyum sağladıklarından emin olmaktır. Genellikle, bu maksimum genişliği%100’e ayarlayarak elde edilir:
{yüksek görüntü: otomatik; Maksimum genişlik:%100; }
Görüntüleri hızlı bir şekilde yüklemek için WordPress geliştiricileri olağanüstü çözümler buldular. Sürüm 4.4’ten bu yana, tarayıcının SRCSET HTML özniteliği aracılığıyla görüntünün boyutunu otomatik olarak mümkün olduğunca küçük sunması için yaptılar. Bu, bant genişliğini tasarruf eder, bu da işleri daha hızlı hale getirir.
Tüm cihazlar için medya sorguları nasıl kullanılır
Pekala, şimdi giriş ve çıkışlara inme zamanı. Aşağıdaki bölümde, CSS medya sorgularının nasıl kullanılacağını tartışacağız ve neler yapabileceklerini göstermek için çeşitli kullanım vakaları sunacağız:
Genel olarak ne tür bir medya kuyruğu
Medya Sorgularınızı Yerleştirecek Bir Yer
Mobil cihazlar için medya sorguları
Tabletler için medya kuyruğu
İPad için medya kuyruğu
Masaüstü için medya sorguları
Genel olarak ne tür bir medya kuyruğu
Farklı cihazlar için kullanabileceğiniz belirli medya sorgularını gruplandırmadan önce, önce neye benzediğini anlamak önemlidir. Style.css dosyasını en iyi duyarlı WordPress temasından görürseniz, aşağıdakiler gibi bir şey göreceksiniz:
@Media Yalnızca ekran ve (maksimum genişlik: 480px) { / * css buradasınız * /}
Gördüğünüz gibi, her sorgu @media ile başlar (bu isim nedeniyle). Çeşitli medya veya cihaz türleri için koşullu kuvveti belirleyebilir. Yalnızca ekran, bilgisayar ekranları, tabletler vb. İçin aşağıdaki kuralların geçerli olduğu anlamına gelir. Alternatif, ekran okuyucuları hedefleyecek olan selamlama.
Sonraki her şey ve takip eden CSS’nin uygulandığı bir koşuldur. Diğer seçenekler değil ve sadece. Bu koşullu ayrıca birkaç koşulda bir koşul düzenlemenizi sağlar.
Yukarıdaki örneğimizde, kuyruk aşağıdaki CSS’yi yalnızca ekrana uygulamak için koşullar ayarlar ve ekran boyutu 480px’in altında hareket eder. Bu, tüm mobil cihazlar için tipik bir medya sorgusudur.
Genel olarak, bu format duyarlı tasarımda bulacağınız en yaygın medya kuyruğudur. Bu aynı zamanda bizim seçim yöntemimiz.
Not: Tüm cihazlar için CSS medya kuyruğunda Min ve Max de birbirinin yerine kullanılabilir. Bununla birlikte, bazı insanlar ekran boyutu ile min genişliği ile maksimum genişlik arasındaki aralığı belirlemeyi tercih eder.
Girebileceğiniz birkaç operatör var. Eğer ilgileniyorsanız, her şeyi burada öğrenebilirsiniz. Şimdilik, medya sorgularınızı yerleştirmek için yere geçelim.
Medya Sorgularınızı Yerleştirecek Bir Yer
Bahsettiğimiz gibi, genellikle popüler ve duyarlı WordPress temasından style.css dosyasında medya kuyruğunu bulabilirsiniz. Daha önce gördüyseniz, bunların genellikle dosyanın sonunda bulunduğunu fark edebilirsiniz. Bunun nedeni, tarayıcının stil sayfasını yukarıdan aşağıya okumasıdır. Aşağıda olan her şey yukarıdaki herhangi bir kural olarak gelir (önemli bir şekilde gerçekleşmediğini açıkça belirtmediğiniz sürece).
Yani, standart yazı tipi boyutunuz 18px ise (style.css’nin başlangıcında tanımlandığı gibi), aşağıdaki medya sorguları ekleyerek daha küçük ekranlar için yazı tipi boyutunu değiştirebilirsiniz:
@Media sadece ekran ve (maksimum genişlik: 480px) {gövde {yazı tipi boyutu: 20px; }}
Medya sorgularının hepsi aynı dosyada olmaması için farklı ekran boyutları için farklı stil sayfası bildirmek de mümkündür. Ancak, bu bölümün kapsamı dışındadır.
Çok uzak çok iyi? Tamam, medya sorgularının nasıl kullanılacağını gerçekten anlamak için, çeşitli cihazlar için bazı ek kullanım durumlarına bakalım.
Mobil cihazlar için medya sorguları
Önceki bölüme eklediğimiz medya kuyruğu, sitenizin hücresel bir versiyonunu oluşturmak için kullanılabilir. Ayrıca, belirli cihazları ve daha spesifik olarak ekran boyutunu hedeflemek için medya sorgularının hücresel durumunu da ayarlayabilirsiniz.
Örneğin, iPhone 5 için, peyzaj ve portre modları için aşağıdaki CSS’yi kullanabilirsiniz:
@Media sadece ekranlar ve (minimum cihaz genişliği: 375 piksel) ve (maksimum cihaz genişliği: 812 piksel) ve (-webkit-min-king-piksel oranlı: 3) {}
Not: Belirli bir akıllı telefonun doğru ekran boyutunu bulmak için bu kaynağa başvurabilirsiniz. CSS-Tricks ayrıca her cihaz için yararlı olan standart medya sorgularının bir listesini sunar. Bunun dışında, yararlı olabilecek medya sorgularını kullanma durumları vardır. Örneğin, mobil cihazlar için ortak CSS medya sorguları menü stilini değiştirir, çünkü bu cihazın genellikle çok farklı menü gereksinimleri vardır. Masaüstü ekranında kullanılan tipik yatay menü telefonda çalışmaz, çünkü düğmeyi parmaklarla vurmak için çok küçük hale getirir.
Bu nedenle, birçok tema, belirli bir boyutun altında duyarlı menülere (burger simgeleriyle birlikte) dönüştürülecek işaretlemeyi içerir. Örneğin, tarayıcınızı Buffs WP web sitemizde küçülüyorsanız, bunu çalışırken görebilirsiniz.
Standart masaüstü ekranında, ana sayfa gezinme menümüz şöyle görünüyor:
Ancak, tarayıcı penceresini küçüldükten sonra şu şekilde değişir:
Bir medya sorgusu kullanmanın bir başka popüler yolu, yan çubuğu ana içeriğin altına taşımaktır. Bu, duyarlı web tasarımında yaygın bir manevra.
Özellikle telefon portre modundayken, mobil cihaz ekranını içerikle tıkamak mantıklı değildir. Modern stil sayfasındaki ortak CSS medya sorgularının örnekleri şuna benzer:
@Media Yalnızca ekran ve (maksimum genişlik: 600px) {. Yan {yüzer: hayır; Genişlik:%100; }}
İçeriği taşımak yerine, tamamen gizlemek isteyebilirsiniz. İçerik hücresel kullanıcılara değer katmazsa veya yükleme çok uzun sürebilirse bu genellikle mantıklıdır. Bu durumda, devre dışı bırakmak için aşağıdakileri kullanabilirsiniz: @Media Yalnızca ekran ve (maksimum genişlik: 480px) {. Great-image {ekran: no; }} Bu medya sorgusunu tabletler gibi diğer cihazlara da uygulayabilirsiniz. Tabii ki, onlara göre maksimum genişlik min ve maksimum genişliği düşünmek istiyorsunuz. Bu yazıda biraz daha ileride, genel ekranın ve kesme noktalarının boyutunu göreceğiz. Ancak, her şeyden önce, tabletler, iPad ve masaüstü bilgisayarlar için diğer cihazlar için birkaç medya sorgu örneğini hızlı bir şekilde görelim.
Tabletler için medya kuyruğu
Bir akıllı telefon gibi, çeşitli tablet ekran boyutları vardır. Genel olarak, tabletler için aşağıdaki CSS medya sorgularını kullanabilirsiniz:
@Media sadece ekran ve (min genişliği: 768px) ve (maksimum genişlik: 1024px)
Ayrıca, düğme tasarımını değiştirmek için medya sorgularında sahte öğeleri kullanabilirsiniz. Bir kez daha, bu özellikle tabletler için değil, ancak buraya ekliyoruz çünkü tabletin akıllı telefona karşı ekran boyutu biraz daha fazla alan ve esneklik sunuyor.
Web tasarımı dünyasında yeni sahte öğeler. HTML öğesinin farklı bölümlerine belirli stilleri uygulayabilirler. Ekran boyutuna bağlı olarak giriş düğmesine farklı bir düzen uygulamak için kullanabileceğiniz yoldur:
.Namapurpan: {Content: “Kullanıcı adınızı girin”; } @media ekran ve (maks-genişlik: 1024px) {. Kullanıcı adı: {content: “kullanıcı adı”; }} @media ekran ve (insan genişliği: 480px) {. Kullanıcı adı: öncesi {içerik: “”; }}
(Örnek için Tomislav’a teşekkür ederiz!)
İPad için medya kuyruğu
Birçok kişi iPad’i tablet olarak görür. Bununla birlikte, teknik olarak Apple tarafından böyle kategorize edilmedikleri için, kendi rollerini vereceğiz. IPad’i hedeflemek için medya sorgularını kullanmanın faydalarından biri, iPad 1’den neredeyse tüm iPad’ler için aynı sorguları kullanabilmenizdir. iPad Mini. Bu cihazda iyi çevrilmiş duyarlı bir tasarım oluşturmak için aşağıdaki CSS satırını kullanabilirsiniz:
@Media sadece ekran ve (minimum cihaz genişliği: 768 piksel) ve (maksimum cihaz genişliği: 1024 piksel)
Bu aynı zamanda peyzaj yönelimi ve portre için de kullanılabilir. İPad Pro’yu hedeflemek istiyorsanız, maksimum cihaz genişliğini 1366px olarak ayarlamayı düşünebilirsiniz.
Masaüstü için medya sorguları
Web tasarımına ilk mobil bir yaklaşım benimsemedikçe, sitenizi masaüstü bilgisayarlar için oluşturabilirsiniz. Ancak, duyarlı bir medya sorgusu kullanmak akıllı bir fikirdir, çünkü ziyaretçiler küçük bir tarayıcı penceresi kullansa bile sağlam bir kullanıcı deneyimi sunduğunuzdan emin olmak istersiniz.
Bu yazıda daha önce hatırlayabileceğiniz gibi, tarayıcının boyutunu değiştirmek, sitenin düzeni ve kullanımı üzerinde büyük bir etkiye sahip olabilir. Masaüstü için CSS medya sorgularının girilmesi, çarpık görünmesini engelleyebilir.
Çoğu durumda, popüler ekran boyutlarına göre medya sorgularını belirlemek, belirli cihazlardan daha mantıklıdır. İkincisi, hemen tartışacağımız bazı sorunlara neden olabilir.
Bu noktada, umarım medya sorgularının nasıl kullanılacağının temellerini ve medya sorgularının duyarlı tasarımda neden çok önemli olduğunu anlarsınız. Bununla birlikte, hala en yaygın ekran boyutunu tartışmak ve karmaşık olabilecek kesme noktasını ayarlamak istiyoruz. En yaygın ekran boyutu ne kadar?
Daha önce de belirtildiği gibi, çeşitli boyutlar, çözünürlük ve oryantasyon içeren birçok farklı cihaz vardır. Peki, hangi noktada tasarımı değiştirmek zorundasınız? Bu soruları cevaplamak için önce bazı istatistiklere bakalım.
Tüm cihazlar için doğru duyarlı medya sorgularını bulmak için bazı istatistiklere bakalım. StatCounter’a göre, aşağıdakiler internetteki en popüler ekran boyutu (Eylül 2020):
Sayı halinde:
360 × 640 -% 11.93
1366 × 768 -% 8.95
1920 × 1080 -% 8.28
375 × 667 -% 4.28
414 × 896 -% 3.24
Diğerleri -% 39.33
Buradan, en iyisinin üç boyut kullanmak olduğu sonucuna varabiliriz: masaüstü, tablet ve cep telefonu. Şimdi kırılma noktamızı bulmanın zamanı geldi. Basitçe söylemek gerekirse, Breakpoint, her iki taraftaki tasarım öğelerinin farklı davranacağı medya sorgularına ekleyebileceğiniz bir şeydir.
Üç ekran boyutu kullanıyorsanız, biri 768px’de diğeri 360px’de iki kırık nokta ekleyebilirsiniz. Bununla birlikte, bu, mobil cihazın, biri 640px’de ve diğeri 1080px’de olmak üzere iki kesme noktası daha gerektiren peyzaj yönelmesinde de işlev gördüğünü düşünmez.
StatCounter verilerini gördüğünüzde, en büyük grubun aslında belirtilmemiş bir boyuttan (%39’dan fazla) oluştuğunu görebilirsiniz. Nasıl optimize edebilirsiniz?
Gördüğünüz gibi, özellikle CSS Min ve Max Media sorgularını tanımlamaya alışkınsanız, tüm cihazların hızlı bir şekilde kafa karıştırıcı olması için duyarlı medya sorgularını ayarlamaya çalışmak. Bu, istatistikleri görmenin bir anlamı olmadığı anlamına gelmez. Aslında kırılma noktanızın genel bir resmini elde etmek için akıllı bir fikir.
Bununla birlikte, sonunda, daha iyi bir fikir, tasarımınıza göre kırılma noktanızı tanımlamaktır. Bazı aletler için kesme noktasını yönetmek yerine, nereye ihtiyaç duyduklarını görmek daha akıllıcadır. Bu şekilde, yüzlerce mevcut cep telefonunu ve tableti optimize etmeniz gerekmez. Tasarımın kendiniz konuşmasını sağlayabilirsiniz.
En iyi yaklaşım her zaman hücresel ile başlamaktır. Tasarımınızı alın ve ekranınızı mümkün olduğunca küçük boyuta indirin. Bir medya sorgunuz yoksa, korkunç görünebilir. Örneğin, bazı medya sorgularını devre dışı bıraktıktan sonra web sitemiz aşağıdadır:
Yani, bu düzeltmenin ilk göreviniz. Tüm düzeni, bir veya iki eleman değiştirmeniz gerekmeyebilir. Not: Kullandığınız ekrandan daha büyük olanlar da dahil olmak üzere farklı boyutlarda görünüm alanları oluşturmak için Chrome ve Firefox geliştiricilerini kullanabilirsiniz.
Amaç, onu kabul etmesini sağlamaktır. Ekranı yavaşça genişletin ve düzen davranışına dikkat edin:
Artık iyi görünmediği noktaya ulaştığınızda, bir kesme noktası buldunuz. Stil sayfanıza değişiklikleri girin, ardından tam ekrana ulaşana kadar aynı şekilde devam edin. Bu sıkıcı olsa da, çok daha iyi bir sonuç verir. Medya Sorgularını Çözün: Genel Sorunlar ve Nasıl Düzeltilir
Medya kuyruğunda tamamen yeniyseniz, ilk kullanmaya başladığınızda bazı sorunlar yaşayabilirsiniz. Tüm cihazlar için medya sorguları ile çalışırken yaşayabileceğiniz en yaygın sorunlara ve bunların üstesinden nasıl geleceğinizi inceleyelim:
Medya sorguları genellikle çalışmaz
Masaüstü için medya kuyruğu çalışmıyor
Hücresel medya kuyruğu çalışmıyor
Medya sorguları genellikle çalışmaz
Ortamınız çalışmıyorsa, kontrol edilmesi gereken ilk şey sorgunun doğru yerde olup olmadığıdır. Belirtildiği gibi, önceki beyanın üzerine yazmak için stil sayfasının sonunda olmalıdırlar. Dizi doğru değilse (daha büyük bir ekran için daha küçük bir ekran için kuyruk), bu bir hata kaynağı olabilir. Her şey çözülür, ancak stiliniz hala üzerine yazılmamışsa, üzerine yazmaya çalıştığınız medya sorgularında aynı CSS seçmenlerini kullandığınızdan emin olun. Daha önce daha spesifik olursa, yeni seçmenler olmaya devam edebilirler.
Başka bir olasılık, bir çizgi olarak bildirilen bir CSS’niz olmasıdır (doğrudan HTML belgesinde stil sayfasının tersi olarak anlamına gelir). Bu durumda, bir CSS hattını silip silemeyeceğinize bakınız veya ipleri önemli! Ayrıca, önceki beyanda! Önemli! Önemli bir şekilde eklenmişse, hayalinizin çalışmamasının nedeni bu olabilir. Masaüstü için medya kuyruğu çalışmıyor Kuyruğunuz mobil cihazlarda çalışsa bile, sorgunun düşük tarayıcı penceresine sahip bir masaüstü bilgisayarda çalışmadığını fark edebilirsiniz. Öyleyse, cihazın özel medya sorgularını ayarlamış olabilirsiniz.
Max-aygıt genişliğinin ve maksimum genişliğin aynı olmadığını belirtmek önemlidir. İlk medya sorgusu için, ekran boyutu (görünüm portu boyutu değil) belirleyici bir faktördür.
Maksimum cihaz genişliği 480px olarak tanımlanır. Bu, tasarımın masaüstü tarayıcısında değişmeyeceği anlamına gelir, çünkü masaüstü aygıtı, görünüm 480px olmasına rağmen daha büyük bir ekrana sahiptir. Ancak, iPhone’da değişecek.
Max-Width’i kullanmak düzeltecektir. Aslında, çoğu durumda maksimum genişlik kullanmak yeterlidir.
Hücresel medya kuyruğu çalışmıyor
Belki ters senaryo ile uğraşıyorsunuz. Kuyruğunuz tarayıcıda çalışıyor, ancak hücresel değilse, görünüm alanını ve varsayılan zoom’u ayarlamayı unutabilirsiniz.
Bunun için, başlığınıza aşağıdaki satırları eklemeniz gerekir:
Bu, tarayıcıya cihazın genişliğine göre bir sayfa oluşturmasını söyler. Eklemek genellikle bir hücresel kesme noktası işlevi yapmayı başardı.
Sık sık sorulan sorular duyarlı tasarımın avantajları ve dezavantajları mı?
Duyarlı tasarım yaklaşımının ana avantajı, yalnızca bir siteye ihtiyacınız olmasıdır. Bu, masaüstü ve hücresel kullanıcılar için ayrı siteleri çalıştırma ve güncelleme ihtiyacını ortadan kaldırır, bu da çok fazla karmaşıklık kazandırır. Buna ek olarak, duyarlı tasarımın arkasındaki teknoloji yaygın olarak benimsenmiştir, böylece cihaz ve tarayıcı ne olursa olsun neredeyse herkes için kullanılabilir. Duyarlı tasarımla göz önünde bulundurmanız gereken en büyük zorluklardan biri, daha yavaş İnternet bağlantılarına veya Wi-Fi aracılığıyla bağlı olmayan mobil cihazlara uyum sağlamasıdır. Buna ek olarak, görüntülerin sadece ekran boyutuna göre ayarlanması değil, aynı zamanda sayfa ağırlığının en büyük parçası haline gelmesi gerekir. Bu nedenle, mümkün olduğunca optimize etmek önemlidir.
Hangi tarayıcı CSS medya sorgularını destekler?
Daha önce de belirttiğimiz gibi, duyarlı tasarım teknolojisi yaygın olarak benimsenmiştir ve bu nedenle ana tarayıcıların çoğu tarafından desteklenmiştir. Bununla birlikte, daha uzun Chrome ve Safari sürümleri yuvalama sorgularını desteklemez ve Internet Explorer ve Firefox’un önceki sürümlerinden bazıları bunu hiç desteklemez.
Paketlemek
Tırmanma cep telefonları ve tabletler tüm çevrimiçi manzaraları elden geçirdi. Şu anda, duyarlı tasarım ve hücresel optimizasyon olmadan bunu yapabilecek bir web sitesi yok. Ancak, sitenizin tüm cihazlara yanıtını en üst düzeye çıkarmak için CSS medya sorgularını kullanmalısınız.
Bu yazıda tartıştığımız gibi, style.css dosyasına birkaç sıra CSS ekleyerek hücresel ve diğer cihazlar için medya sorgularını kullanabilirsiniz.Bu sorguyu genel ekran boyutuna göre belirleyebilir ve belirli öğeleri gizlemek ve taşımak için hükümleri uygulayabilirsiniz. Medya sorgularını kullanmak, daha iyi hücresel deneyimler ve tarayıcılar için WordPress sitenizi optimize etmenin birçok yolundan sadece biridir.WP Buffs’ta yardımcı olabiliriz.Bir blog veya düzinelerce müşteri sitesi olsun, sitenizi geliştirebilecek ve geliştirebilecek bakım planları ve beyaz etiket çözümleri sunuyoruz.Onları bugün gör!
Cevabınızı vermek mi yoksa sohbete katılmak ister misiniz?Twitter’a yorumlarınızı ekleyin.
