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 701.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Nisan 2015'in sonundan bu yana mobil cihaz kullanımının arttığına dikkat çeken Google, sayfaları mobil kullanıma hazır olmayan web sitelerini cezalandırdı. Sonuç olarak, SEO'nuz için web sitenizin hem büyük ekranlarda hem de küçü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 "mobil uyumlu" terimlerinin gerçek anlamlarındaki farklılığa rağmen genellikle birbirinin yerine kullanıldığına dikkat etmek önemlidir. Her birinin ne anlama geldiğini anlamak, web sitenizin tüm ekran boyutlarını barındırmak için gerekli kriterleri karşıladığından emin olmak için ö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 versiyonu her yerde görüntülenir. Daha küçük ekranlarda, tüm içeriğini görmek için sayfayı yatay olarak kaydırmanız gerekir. Bu ekranlarda gezinmek zordur. 

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

Bir web sitesi uyumlu Mobil yalnızca mobil cihazlarda görülmesi gereken katı minimum şartları karşıladığında, bu da onu duyarlı bir web sitesi yapmaz. Örneğin, yatay olarak gezinmeniz gerekmiyorsa, bir web sitesi mobil uyumlu olarak değerlendirilebilir. Bu, öğelerinin küçülmesine ve ayırt edilemez olmasına neden olur. Daha sonra içeriğini 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ülebilecek ve kullanılabilecek şekilde yeniden tanımlarlar. 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 CSS3, web sitenizi duyarlı olacak şekilde güncellemenize veya duyarlı içeriğe sahip WordPress temalarını kolayca oluşturmanıza olanak tanır.

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ü (boyutu) için kullanmak istediğiniz stilleri tanımlamanıza olanak tanır. Diğer CSS kurallarını iç içe geçirmesindeki tek farkla, onu başka bir CSS kuralı gibi (küme parantezli) kullanacaksınız.

@media media-type (ifade) {css-test-selector {özellik1: değer1; özellik2: değer2; }}

Bu yapıda kuralın içindeki unsurlar @ 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 web sitenizin ziyaret edildiği ekran türünü sizin için algılar ve bu tür ekrana en uygun kuralları seçer. Tüm büyük tarayıcılar kuralı zaten entegre etti @media.

İşte bilgilerinizin listesi: 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 iletmelisiniz @media hedeflenen ekran türü. İşte farklı ekran türlerinin listesi:

- herşey : tüm ekran türleri için veya içinde belirtilen boyutlar için ifade
- ekran : tüm ekranlar için, mobil, tablet, dizüstü veya masaüstü
- baskı : yazıcılar için, yazdırılabilen sayfalar için belirli stiller istiyorsanız
- konuşma : Görme engelliler için stil istiyorsanız, ekran okuyucular için.

Ekran türünün önüne koyabileceğiniz operatörler de vardır; gibi değil belirtilenden farklı tipteki ekranlar için stilleri görüntülemek için veya bir tek stilleri yalnızca belirli ekranlara uygulamak için. Bu nedenle sahip olabilirsiniz:

@media sadece ekran

Ekran boyutları için stilleri tanımlayın

Sen kullanabilirsiniz ifade ekranın özellikleri hakkında daha fazla ayrıntı sağlamak için. Sonra @media girmek ve ardından ifade gelir. Birden çok ifade kullanıyorsanız, bunların tümü ile ayrılmalıdır. ve. İşte yapı örneği:

@media only screen ve (max-width: 640px) {selector-css-example {/ * Her zamanki CSS'niz burada * /}}

Bu örnekte kullanıyorum maksimum genişlik değerinde 640px. Bu, bir iPhone veya küçük bir Android akıllı telefon boyutunun maksimum ekran genişliğini ayarlamak içindir. Bu tür bir yapı ile, web sitenizin farklı cihazlarda nasıl göründüğünü kontrol edebilirsiniz. Burada kullanabileceğiniz boyutlarla ilgili özelliklerin bir listesi 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 bulunan stillerin görüntülenmesi için gereken minimum ve maksimum genişlik @media. Bir piksel daha ve stiller görüntülenmiyor.

- min yükseklik et max-height : sırasıyla kuralda yer alan 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.

İşte bazı terminaller için ekran boyutlarının listesi:

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

Kullanabileceğiniz başka birçok özellik var ifade. Örneğin, 16: 9 en boy oranına sahip görüntüleri gösterebilen masaüstü veya televizyon ekranlarını hedefliyorsanız, aşağıdaki gibi bir yapı kullanabilirsiniz:

@media yalnızca ekran ve (min-genişlik: 1920 piksel) ve (cihaz en boy oranı: 16/9) {selector-css-example {/ * Her zamanki CSS'niz 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, sonuçta duyarlı olup olmadığını görmek için sonucu test etmelisiniz. Unutmayın, Google yanıt vermeyen web sitelerini izliyor.

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]

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

Hedeflediğiniz tüm mobil cihazlara sahip olmadığınız takdirde, web sitenizin farklı ekranlara nasıl uyum sağladığını görmek için (neyse ki borsalarımız için) çok sayıda araç bulunmaktadı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ın boyutlarını kendiniz seçmenize izin verme özelliğine sahiptir. Bu web sitesinin sizinkini bir çerçeve içinde yüklediğini unutmayın. Dolayısıyla, WordPress temanız bir çerçevede görüntülenmeyecek şekilde tasarlandıysa, ikincisinin burada gösterilmemesi oldukça olasıdır.

iPad Peek

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

Bu web sitesi, web sitenizi en son Apple, iPad ve iPhone cihazlarında test etmek için kullanışlıdır. 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 eski telefon modellerinde test edebilirsiniz. Ayrıca bazı ekran özelliklerini de yapılandırabilirsiniz.

Google Mobil Uyumluluk Testi

css3-medya-google-mobil uyumluluk testi

Bu, en önemlisi değilse de en önemli testlerden biridir. Adresinizi çubuğa girin ve Çözümlemek testi başlatmak için. Testten sonra araç bir rapor ve bir puan görüntüler. Test olumlu ise, o zaman daha iyi, Google tarafından cezalandırılmayacaksınız.

Ç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]

Geliştirici değilseniz, size tavsiye ederim duyarlı WordPress temalarının listesi başlatın.

Önerilen Kaynaklar

Ayrıca, ortaklarınızı ve abonelerinizi daha iyi çekmenize yardımcı olacak ve aynı zamanda web sitenizin güvenliğini artıracak diğer önerilen kaynakları keşfedin.

Sonuç

Buraya ! kuralı kullanarak web sitenizi veya WordPress temanızı nasıl duyarlı hale getireceğiniz hakkında bilmeniz gereken her şeyi biliyorsunuz @media CSS3 arasında. Sizin için değerli olan veya tercih ettiğiniz bir WordPress temasını kaçırırsak, lütfen bölüme bir bağlantı 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 hesabınız yayımlanmayacak. 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