Přejít k hlavnímu obsahu

Reagující WordPress design s pravidlem @media CSS3

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 600.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Vzhledem k rostoucímu používání mobilních zařízení Google od konce dubna 2015 penalizuje weby, jejichž stránky nejsou připraveny pro mobilní zařízení. V důsledku toho se u vašeho SEO musíte ujistit, že se váš web zobrazuje slušně na velkých obrazovkách jako na menších.

V tomto článku vám ukážu, jak můžete svůj web umístit na stránku pomocí pravidla @media CSS3.

Je důležité si uvědomit, že pojmy „responzivní“ a „kompatibilní-mobilní“ se často používají zaměnitelně, a to i přes rozdíl v jejich skutečném významu. Je důležité pochopit, co znamená každý, aby bylo zajištěno, že váš web splňuje kritéria nezbytná pro přizpůsobení všech velikostí obrazovky.

Ale dříve, pokud jste nikdy nenainstalovali WordPress objevit Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu

Pak se vraťme k tomu, proč jsme tady.

Citlivý a kompatibilní mobilní

Webové stránky, které nejsou ani citlivé ani kompatibilní, jsou zobrazeny identicky na všech obrazovkách, tj. verze pro velké obrazovky se zobrazuje všude. Na menších obrazovkách musíte stránku vodorovně posouvat, abyste viděli veškerý její obsah. Na těchto obrazovkách je obtížné navigovat.

Objevte také tyto Zásuvné moduly 8 WordPress pro přizpůsobení vzhledu vašich webových stránek

Web je mobilní kompatibilní když respektuje pouze striktní minimum, které je třeba vidět na mobilu, což z něj nečiní citlivý web Můžeme například uvažovat, že web je kompatibilní-mobilní, pokud nemusíte navigovat horizontálně. To má za následek to, že její prvky jsou malé a nerozeznatelné. Chcete-li číst obsah, musíte se přiblížit.

Na jejich straně webové stránky citlivý dokonale se přizpůsobit různým velikostem obrazovky. Předefinují své prvky tak, aby byly snadno vidět a používat na menších obrazovkách. Toto je typ designu, který chcete pro svůj web.

Viz také naše Zásuvné moduly 10 WordPress k vytvoření rezervačního formuláře na vašich webových stránkách

Nyní víte rozdíl mezi responzivními a kompatibilními mobilními telefony. Nyní uvidíme pravidlo @media CSS3, který umožňuje, aby vaše webové stránky byly aktuální pro responzivní nebo poměrně snadno vytvářely témata WordPress s responzivním obsahem.

Pravidlo @media z CSS3

Aby vaše téma reagovalo, budete potřebovat pravidlo @media CSS3. V zásadě umožňuje definovat styly, které chcete použít pro konkrétní typ obrazovky. Použijete jej jako další pravidlo CSS (se složenými závorkami) s jediným rozdílem, že se překrývá s ostatními pravidly CSS.

@ media type-of-media (expression) {selector-css-test {property1: value1; property2: value2; }}

V této struktuře prvky uvnitř pravidla @ media pracovat pouze tehdy, když druh-of-média určeno, že bylo úspěšně detekováno. Typ vybraného média, můžete určit charakteristiky z hlediska rozměrů.

Discover Jak aplikovat rozhraní a uživatelské prostředí na WordPress

Pravidlo @media detekuje pro vás typ obrazovky, na které je váš web navštěvován, a vybírá pravidla, která nejlépe vyhovují tomuto typu obrazovky. Pravidlo již obsahuje všechny hlavní prohlížeče @media.

Zde je pro vaši informaci seznam: chróm , safari, Firefox, IE, obsluhovat et Hrana.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Definujte cílové obrazovky

Pokud chcete upravit existující motiv WordPress, vytvořte si záložní kopii CSS tohoto CSS, abyste se mohli v případě potřeby vrátit zpět.

Přečtěte si také náš článek o Jak postupně načítat komentáře Facebook a Disqus

Jak jsme viděli ve své struktuře, pro definování typu obrazovky musíte postupovat vpřed @media cílený typ obrazovky. Zde je seznam různých typů obrazovek:

- všechno : pro všechny typy obrazovek nebo pro rozměry uvedené v výraz
- obrazovka : pro všechny obrazovky, ať už mobilní, tablet, notebook nebo stolní počítač
- vytisknout : u tiskáren, chcete-li, aby byly vytvořeny konkrétní styly pro stránky, které lze vytisknout
- řeč : pro čtečky obrazovky, pokud chcete styly pro zrakově postižené.

Existují také operátory, které můžete umístit před typ obrazovky; jako ne pro zobrazení stylů pro obrazovky jiného typu, než je uvedený, nebo pouze aplikovat styly pouze na určené obrazovky. Takže můžete mít:

@media pouze

Nastavit styly pro rozměry obrazovky

Můžete použít výraz k objasnění vlastností obrazovky. po @media vstoupit a následovaný výrazem. Pokud používáte více výrazů, měly by být všechny odděleny a, Zde je příklad struktury:

@media pouze obrazovka a (max-šířka: 640px) {selector-css-example {/ * Váš CSS obvykle zde * /}}

V tomto příkladu používám max šířkou s hodnotou 640px, Toto je nastavení maximální šířky obrazovky velikosti IPhone nebo malého smartphonu Android. S takovou strukturou máte kontrolu nad tím, jak se vaše webové stránky zobrazují na různých terminálech. Zde je seznam vlastností souvisejících s rozměry, které můžete použít v výraz :

Objevte také naše 8 SEO WordPress pluginy pro optimalizaci SEO vašich webových stránek

- mv-šířce et max šířkou : minimální a maximální šířka požadovaná pro zobrazení stylů v pravidle @media, Ještě jeden pixel a styly se nezobrazí.

- min-výšky et max-výšky : minimální a maximální výška požadovaná pro zobrazení stylů v pravidle @media, Protože většina obrazovek je navržena tak, aby stránky svisle rozbalovala, vlastnosti min-výška et max-výšky jsou málo zvyklí.

Zde je seznam rozměrů obrazovky některých terminálů:

- IPhone: 640px
- IPad: 1024px
- Tablety: 1366px
- Android Smartphone: 640px, 720px, 854px, 960px
- Extra velký Android: 1024px, 1066px
- Windows phone: 480
- Windows phone large: 768px
- starý a malý: 320px
- Ultrabook / notebooky: 1366px
- Stolní počítače a televizory: 1920px

Existuje mnoho dalších vlastností, které můžete použít výraz, Pokud například zacílíte na stolní počítače nebo televizní obrazovky, které mohou zobrazovat obrázky ve formátu 16: 9, můžete použít strukturu takto:

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

@media pouze displej a (min šířka: 1920px) a (na zařízení s poměrem stran 16 / 9) {css volič-příklad {/ * ve své běžné CSS zde * /}}

Podrobnější seznamy a příklady naleznete v části Konzultace w3schools et Mozilla Developers.

Otestujte responzivní funkčnost svého webu

Když změníte nebo vytvoříte své téma WordPress nebo na konci, pokud máte rádi překvapení, musíte vyzkoušet výsledek, abyste zjistili, zda je konečně citlivý. Pamatujte, Google sleduje webové stránky, které nereagují.

Viz také tyto 10 WordPress pluginy pro vytváření záložek na vašem blogu

Pokud nemáte všechna mobilní zařízení, na která cílíte, existuje (naštěstí pro naše burzy) mnoho nástrojů, jak zjistit, jak váš web vyhovuje různým obrazovkám.

Přímo v prohlížeči v počítači můžete použít Rozšíření prohlížeče prohlížeče Chrome Resizer, ResponsiveResize, ResizeMe ou Firesizer, Níže je obrázek BlogPasCher v zobrazení Responsive Design View, které se standardně dodává s Firefoxem.

css3-media-firefox reagující-design-view

Tomuto úkolu se věnují také webové stránky:

Responsivepx

css3-media-responsivepx

Tato webová stránka je specifická tím, že vám umožňuje zvolit si rozměry obrazovky sami. Tento web se načte do rámečku. Takže pokud vaše téma WordPress bylo navrženo tak, aby se neobjevovalo v rámečku, pak je docela možné, že se zde nezobrazí.

IPad Peek

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

Tento web je zajímavý pro testování vašeho webu na nejnovějších terminálech Apple, IPad a IPhone. Stačí zadat svou adresu URL. Všimněte si, že podléhá stejnému problému s rámečkem jako responzivní x.

Mobilní telefon Emulator

css3-media-mobile-phone-emulátor

Na tomto webu můžete vyzkoušet vaše malé obrazovky a starší modely telefonů, které vyberete na pravé straně obrazovky. Můžete také nakonfigurovat některé vlastnosti obrazovky.

Test služby Google Mobile Friendly

-Google css3-media-mobile-friendly testu

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

Zde je jeden z nejdůležitějších testů, ne-li to nejdůležitější. Jednoduše zadejte adresu do lišty a klikněte na ni Analyzovat zahájit test. Po testu nástroj zobrazí zprávu a poznámku. Pokud je test pozitivní, pak o to lepší, společnost Google nebude penalizována.

Pokud nejste vývojář, radím vám seznam responzivních témat WordPress začít.

Doporučené zdroje

Objevte další doporučené zdroje, které vám pomohou vyhrát nad vašimi partnery a odběrateli, a také zlepšit bezpečnost vašeho webu.

závěr

To je vše! víte vše o tom, jak vaše pravidlo nebo téma WordPress reagovat pomocí pravidla @media CSS3. Pokud jsme zmeškali téma WordPress, které je vám drahé nebo kterému dáváte přednost, zanechte prosím odkaz v této sekci commentaires níže.

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Zveme vás také sdílet na různých sociálních sítích.

...

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
4 akcie
podíl4
tweet
Zadat