Ana İçeriğe Geç

@media kuralı CSS3 ile Duyarlı Tasarım WordPress

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Mobil cihazların kullanımındaki artışa dikkat çeken Google, Nisan 2015’in sonundan bu yana, Google, sayfaları mobil kullanıma hazır olmayan web sitelerini cezalandırıyor. Sonuç olarak, SEO'nuz için, web sitenizin küçük ekranlarda olduğu gibi büyük ekranlarda düzgün bir şekilde görüntülendiğinden emin olmalısınız.

wordpress tasarım duyarlı kurallar medya css3

Bu makalede, web sitenizi kuralı kullanarak sayfaya nasıl yerleştirebileceğinizi göstereceğim. @media CSS3 arasında.

"Duyarlı" ve "uyumlu-mobil" terimlerinin, gerçek anlamlarındaki farklılıklara rağmen sıklıkla birbirlerinin yerine kullanıldığına dikkat etmek önemlidir. Web sitenizin tüm ekran boyutlarına uymak için gerekli kriterleri karşıladığından emin olmak için herkesin ne anlama geldiğini anlamak önemlidir.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için

O zaman neden burada olduğumuza dönelim.

Duyarlı ve Mobil Uyumlu

Olmayan web siteleri ne tepki ne de uyumlu cep, tüm ekranlarda aynı şekilde görüntülenir; yani, büyük ekranların sürümü her yerde görüntülenir. Küçük ekranlarda, tüm içeriğini görmek için sayfayı yatay olarak kaydırmanız gerekir. Bu ekranlarda gezinmek zor.

Bunları da keşfedin Web sitenizin görünümünü özelleştirmek için 8 WordPress eklentileri

Bir web sitesi uyumlu Mobil Cep telefonunda görülmesi yalnızca asgari seviyeye saygı duyduğunda, bu yanıt veren bir web sitesi yapmaz. Örneğin, yatay olarak gezinmeniz gerekmiyorsa bir web sitesinin uyumlu olduğunu düşünebiliriz. Bu, elemanlarının küçük ve ayırt edilemez hale gelmesine neden olur. İçeriği okumak için yakınlaştırmanız gerekir.wordpress tasarım duyarlı kurallar medya css3 2

Onların tarafında web siteleri duyarlı Farklı ekran boyutlarına mükemmel uyum sağlar. Öğelerini, daha küçük ekranlarda kolayca görülebilmeleri ve kullanılabilecekleri şekilde yeniden tanımlıyorlar. Bu, web siteniz için istediğiniz tasarım türüdür.

Ayrıca bakınız Sitenizde bir rezervasyon formu oluşturmak için 10 WordPress eklentileri

Artık, duyarlı ve uyumlu mobil arasındaki farkı biliyorsunuz. Şimdi kuralı göreceğiz @media , web sitenizi yanıt vermek için güncel kılmak veya yanıt veren içeriğe sahip oldukça kolay WordPress temaları oluşturmak için kullanabileceğiniz CSS3’in

Kural @media CSS3 arasında

Temanızı duyarlı hale getirmek için kurala ihtiyacınız olacak. @media CSS3. Temel olarak, belirli bir ekran türü için kullanmak istediğiniz stilleri tanımlamanıza olanak tanır. Başka bir CSS kuralı (parantezli) olarak, diğer CSS kurallarıyla çakışan tek farkı olarak kullanacaksınız.

@ ortam türü medyası (ifade) {selector-css-test {property1: value1; property2: value2; }}

Bu yapıda kuralın içindeki elemanlar @ ortamı tek iş yaparken tür-of-medya başarıyla algılandığı belirtildi. Seçilen ortam türünü, boyutlar cinsinden özelliklerini belirleyebilirsiniz.

wordpress tasarım duyarlı kurallar medya css3 3keşfedin WordPress'e Arayüz ve Kullanıcı Deneyimi Nasıl Uygulanır?

Kural @media sizin için web sitenizi ziyaret ettiğiniz ekran türünü algılar ve bu ekran türüne en uygun kuralları seçer. Tüm büyük tarayıcılar zaten kuralı dahil etmiştir @media.

İşte bilginiz için liste: krom , safari, Firefox, IE, işletmek et kenar.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Hedef ekranları tanımlayın

Var olan bir WordPress temasını değiştirmek isterseniz, lütfen sonuncunun CSS'sinin yedek bir kopyasını alın, böylece gerekirse geri dönebilirsiniz.

Ayrıca bizim makalemizi okuyun. Facebook ve Disqus yorumları yavaş yavaş nasıl yüklenir

Yapısında gördüğümüz gibi, ekran tipini tanımlamak için ileri @media hedeflenen ekran türü. Farklı ekran türlerinin listesi:

- herşey : tüm ekran tipleri için veya ifade
- ekran : tüm ekranlar için, mobil, tablet, dizüstü veya masaüstü
- baskı : Eğer sayfaları için ayrı ayrı tarzlarda istiyorsanız yazıcılar için, basılabilir o
- konuşma : Görme engelliler için stiller istiyorsanız, ekran okuyucular için.

Ekran türünden önce koyabileceğiniz operatörler de vardır; olarak değil belirtilenler dışındaki türde bir ekran stilleri görüntülemek bir tek stilleri yalnızca belirtilen ekranlara uygulamak için. Böylece şunları yapabilirsiniz:

@media sadece ekran

Ekran boyutları için stilleri ayarlama

Sen kullanabilirsiniz ifade Ekranın özelliklerini netleştirmek için. sonra @media girmek ve ifadesini takip etti. Birden çok ifade kullanıyorsanız, bunların tümü ile ayrılmalıdır. ve. İşte yapı örneği:

@ media sadece ekran ve (maks. genişlik: 640px) {selector-css-example {/ * CSS'niz genellikle burada * /}}

Kullandığım bu örnekte maksimum genişlik değerinde 640px. Bu, bir IPhone veya küçük bir Android akıllı telefonun boyutunun maksimum ekran genişliğini ayarlamak içindir. Bu tür bir yapı ile, web sitenizin farklı terminallerde nasıl göründüğünü kontrol edebilirsiniz. Burada kullanabileceğiniz boyutlarla ilgili özelliklerin bir listesi bulunmaktadır. ifade :

Ayrıca bizim keşfetmek 8 SEO WordPress eklentileri web sitenizin SEO'sunu optimize eder

- min-genişliği et maksimum genişlik : sırasıyla kuralda stilleri görüntülemek için gereken minimum ve maksimum genişlik @media. Bir piksel daha ve stiller görüntülenmiyor.

- min yükseklik et max-height : kuraldaki stilleri görüntülemek için gereken minimum ve maksimum yükseklik @media. Çoğu ekran, sayfaları dikey olarak açmak için tasarlandığından, özellikler Min yükseklikte et max-height çok az kullanılırlar.

Bazı terminallerin ekran boyutlarının bir listesi:

- IPhone: 640px
- IPad: 1024px
- Tabletler: 1366px
- Android Akıllı Telefon: 640px, 720px, 854px, 960px
- Ekstra büyük Android: 1024px, 1066px
- Windows telefonu: 480
- Windows telefonu büyük: 768px
- yaşlı ve küçük: 320px
- Ultrabook / Dizüstü Bilgisayarlar: 1366px
- Masaüstü Bilgisayarlar ve TV'ler: 1920px

Kullanabileceğiniz birçok özellik var ifade. Örneğin, 16 formatındaki görüntüleri gösterebilen masaüstlerini veya TV ekranlarını hedefliyorsanız: 9 şöyle bir yapı kullanabilirsiniz:

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

@ media sadece ekran ve (min-width: 1920px) ve (cihaz-en-boy oranı: 16 / 9) {selector-css-example {/ * CSS'niz genellikle burada * /}}

Daha eksiksiz listeler ve örnekler için danışın w3schools et Mozilla Developpers.

Web sitenizin duyarlı işlevselliğini test edin

WordPress temanızı değiştirirken veya oluştururken ya da sonunda sürprizlerden hoşlanıyorsanız, sonunda yanıt verebilir olup olmadığını görmek için sonucu test etmeniz gerekir. Unutmayın, Google yanıt vermeyen web sitelerini izliyor.

Bunlara da bakınız Blogunuzda sekmeler oluşturmak için 10 WordPress eklentileri

Hedeflediğiniz tüm mobil cihazlara sahip değilseniz, web sitenizin farklı ekranlara nasıl uyduğunu görmek için (borsalarımız için) bir çok araç vardır.

Doğrudan bilgisayarınızın tarayıcısına kullanabilirsiniz Window Resizer Chrome Tarayıcı Uzantısı, ResponsiveResize, ResizeMe ou firesizer. Aşağıda, varsayılan olarak Firefox ile birlikte gelen Duyarlı Tasarım Görünümü'ndeki BlogPasCher'ın bir görüntüsü bulunmaktadır.

css3-medya-firefox-duyarlı tasarıma görüş

Göreve adanmış web siteleri de vardır:

Responsivepx

css3-medya-responsivepx

Bu web sitesi ekran boyutlarını kendiniz seçmenize izin verme özelliğine sahiptir. Bu web sitesinin sizinkini bir çerçeveye yüklediğini unutmayın. Bu nedenle, eğer WordPress temanız bir çerçevede görünmeyecek şekilde tasarlandıysa, ikincisi burada görünmüyor olabilir.

iPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-medya-ipad-peek

Bu web sitesi, web sitenizi en son Apple terminalleri, IPad ve IPhone üzerinde test etmek için ilgi çekicidir. Sadece URL’nizi girin. Responsivepx ile aynı çerçeve problemine tabi olduğunu unutmayın.

Cep Telefonu Emulator

css3-medya-cep-telefonu-emülatörü

Bu web sitesinde sizinkini küçük ekranlarda ve ekranın sağ tarafında seçtiğiniz daha eski telefon modellerinde test edebilirsiniz. Bazı ekran özelliklerini de yapılandırabilirsiniz.

Google Mobil Uyumluluk Testi

css3-medya-google-mobil uyumluluk testi

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Bu en önemli testlerden biri değilse, en önemli şeydir. Sadece barda adresinizi girin Çözümlemek testi başlatmak için. Testten sonra, araç bir rapor ve bir not görüntüler. Test olumluysa, o zaman en iyisi, Google tarafından cezalandırılmayacaksınız.

Eğer bir geliştirici değilseniz, size tavsiyem duyarlı WordPress temalarının listesi başlatın.

Önerilen Kaynaklar

Ortaklarınız ve abonelerinizden kazanmanıza yardımcı olacak diğer web kaynaklarını da keşfedin.

Sonuç

İşte bu! web sitenizi veya WordPress temanızı kuralı kullanarak nasıl yanıt verebilir hale getirebileceğinize dair her şeyi biliyorsunuzdur @media CSS3 arasında. Sizin için değerli olan veya tercih ettiğiniz bir WordPress temasını kaçırırsak, lütfen bu bölüme bir link bırakın. Yorumlar Aşağıda.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ayrıca sizi davet ediyoruz farklı sosyal ağlarda paylaşın.

...

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse4
cıvıltı
Enregistrer