Gå till innehållet

Responsiv design Wordpress med @media regeln CSS3

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Med tanke på den ökande användningen av mobila terminaler sedan slutet av april 2015 har Google straffat webbplatser vars sidor inte är redo för mobil. Följaktligen, för din SEO, måste du se till att din webbplats visas anständigt på stora skärmar såväl som på mindre.

design wordpress responsiv regel media css3

I den här artikeln visar jag dig hur du kan sätta din webbplats på sidan med regeln @media av CSS3.

Det är viktigt att notera att termerna "responsiv" och "mobilkompatibel" ofta används omväxlande trots skillnaden i deras verkliga betydelse. Att förstå vad varje betyder är viktigt för att kunna säkerställa att din webbplats uppfyller de nödvändiga kriterierna för att rymma alla skärmstorlekar.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Låt oss sedan gå tillbaka till varför vi är här.

Responsiv och mobilkompatibel

Webbplatser som inte är det varken lyhörd eller mobilkompatibel, visas identiskt på alla skärmar, dvs. versionen för stora skärmar visas överallt. På mindre skärmar måste du rulla sidan horisontellt för att se allt innehåll. De är svåra att navigera på på dessa skärmar. 

Upptäck också dessa 8 WordPress plugins för att anpassa utseendet på din webbplats

En webbplats är Mobile kompatibel när det bara uppfyller det strikta minimum som ska ses på mobilen, vilket inte gör det till en lyhörd webbplats. Till exempel kan en webbplats anses vara mobilkompatibel om du inte behöver navigera horisontellt. Detta gör att dess element blir små och oskiljbara. Du måste sedan zooma in för att läsa dess innehåll.design wordpress responsive media rule css3 2

På deras sida webbplatserna mottaglig anpassa sig perfekt till olika skärmstorlekar. De omdefinierar sina element så att de lätt kan ses och användas på de minsta skärmarna. Det här är den typ av design du vill ha för din webbplats.

Se även vår 10 WordPress plugins för att skapa en bokningsformulär på din webbplats

Nu vet du skillnaden mellan lyhörd och kompatibel mobil. Vi kommer nu att se regeln @media CSS3 som låter dig uppdatera din webbplats för att vara lyhörd eller för att enkelt skapa WordPress-teman med responsivt innehåll.

Regeln @media från CSS3

För att göra ditt tema lyhörd behöver du regeln @media av CSS3. I grund och botten kan du definiera de stilar du vill använda för en viss typ (storlek) av skärmen. Du använder den som en annan CSS-regel (med hängslen) med den enda skillnaden att den överlappar andra CSS-regler.

@media mediatyp (uttryck) {css-test-väljare {property1: value1; fastighet2: värde2; }}

I denna struktur elementen inuti regeln @ media funktion endast när typ-av-media anges för att ha upptäckts framgångsrikt. Den typ av media som väljs, du kan ange egenskaperna i form av dimensioner.

design wordpress responsive media rule css3 3Upptäck Hur man använder gränssnitt och användarupplevelse på WordPress

Regeln @media upptäcker för dig vilken typ av skärm som din webbplats besöks med och väljer de regler som bäst passar den här typen av skärm. Alla större webbläsare har redan integrerat regeln @media.

Här är listan för din information: krom , safari, firefox, IE, Fungera et kant.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Definiera målskärmarna

Om du vill ändra ett befintligt WordPress-tema, vänligen skapa en säkerhetskopia av CSS för det senare så att du kan gå tillbaka vid behov.

Läs också vår artikel om Hur du gradvis laddar Facebook- och Disqus-kommentarer

Som vi har sett i dess struktur måste du vidarebefordra för att definiera skärmtypen @media vilken typ av skärm du riktar dig till. Här är listan över de olika typerna av skärm:

- alla : för alla typer av skärmar eller för de dimensioner som anges i Uttrycket
- screen : för alla skärmar, antingen mobil, surfplatta, bärbar dator eller skrivbord
- skriv ut : för skrivare, om du vill ha vissa stilar för sidorna som kan skrivas ut
- tal : för skärmläsare, om du vill ha stilar för synskadade.

Det finns också operatörer som du kan lägga före skärmtypen; som inte för att visa stilar för skärmar som är av annan typ än den som anges eller endast för att bara använda stilar på angivna skärmar. Du kan därför ha:

@media endast skärm

Definiera stilar för skärmdimensioner

Du kan använda Uttrycket för att ge mer information om skärmens egenskaper. Efter @media ange och följt av uttrycket. Om du använder mer än ett uttryck bör de alla separeras av och. Här är ett exempel på strukturen:

@media endast skärm och (max-bredd: 640px) {selector-css-exempel {/ * Din vanliga CSS här * /}}

I det här exemplet använder jag max-bredd med ett värde av 640px. Detta för att ställa in en maximal skärmbredd på storleken på en iPhone eller en liten Android-smartphone. Med denna typ av struktur har du kontroll över hur din webbplats ser ut på olika enheter. Här är en lista över egenskaper relaterade till dimensioner som du kan använda i Uttrycket :

Upptäck också vår 8 SEO WordPress plugins för att optimera SEO på din webbplats

- mi-bredd et max-bredd : respektive den lägsta och högsta bredden som krävs för visning av stilar som ingår i regeln @media. Ytterligare en pixel och stilar visas inte.

- mi-höjd et max-höjd : respektive den lägsta och högsta höjd som krävs för att visa stilarna i regeln @media. Eftersom de flesta skärmar är utformade för att rulla upp sidor vertikalt, egenskaper min-höjd et max-höjd är lite använda.

Här är en lista över skärmstorlekar för vissa terminaler:

- IPhone: 640px
- IPad: 1024px
- Tabletter: 1366 pixlar
- Android-smartphone: 640 pixlar, 720 pixlar, 854 pixlar, 960 pixlar
- Android extra stor: 1024px, 1066px
- Windows-telefon: 480
- Windows-telefon stor: 768 pixlar
- unga och gamla: 320 pixlar
- Ultrabook / bärbara datorer: 1366px
- Stationära och TV-apparater: 1920 pixlar

Det finns många andra egenskaper du kan använda i Uttrycket. Om du till exempel riktar dig mot stationära datorer eller TV-skärmar som kan visa bilder i bildförhållandet 16: 9 kan du använda en sådan struktur:

@media endast skärm och (min-bredd: 1920 pixlar) och (enhet-bildförhållande: 16/9) {selector-css-exempel {/ * Din vanliga CSS här * /}}

 För mer kompletta listor och exempel, kontakta w3schools et Mozilla Developpers.

Testa din känsliga funktionalitet på din webbplats

När du redigerar eller bygger ditt WordPress-tema eller i slutet om du gillar överraskningar bör du testa resultatet för att se om det i slutändan är lyhörd. Kom ihåg att Google tittar efter webbplatser som inte är lyhörda.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Se även dessa 10 WordPress plugins för att skapa flikar på din blogg

Om du inte har alla mobila enheter som du riktar dig mot finns det (lyckligtvis för våra börser) ett stort antal verktyg för att se hur din webbplats anpassar sig till de olika skärmarna.

Direkt i webbläsaren på din dator kan du använda Window Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Nedan visas en bild av BlogPasCher i Responsiv designvy som levereras som standard med Firefox.

css3-media-firefox-känslig-design-view

Det finns också webbplatser avsedda för uppgiften:

Responsivepx

css3-media-responsivepx

Denna webbplats har det speciella att låta dig själv välja skärmens mått. Observera att den här webbplatsen laddar din i en ram. Så om ditt WordPress-tema var utformat för att inte visas i en ram, är det mycket möjligt att det senare inte visas här.

IPad Peek

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

Denna webbplats är användbar för att testa din webbplats på de senaste Apple-, iPad- och iPhone-enheterna. Ange bara din URL. Observera att den är föremål för samma ramproblem som responsivepx.

Mobiltelefon Emulator

css3-media-mobile-phone-emulator

På den här webbplatsen kan du testa din på små skärmar och på äldre modeller av telefoner som du väljer på höger sida av skärmen. Du kan också konfigurera vissa skärmegenskaper.

Google Mobile Friendly test

css3-media-google-mobile vänliga testet

Detta är ett av de viktigaste testerna, om inte det viktigaste. Ange bara din adress i fältet och klicka på Analysera för att starta testet. Efter testet visar verktyget en rapport och en poäng. Om testet är positivt kommer du inte att bestraffas av Google, desto bättre.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Om du inte är utvecklare rekommenderar jag dig en lista med lyhörda WordPress-teman till att börja med.

Rekommenderade resurser

Upptäck även andra rekommenderade resurser som hjälper dig att bättre locka dina partners och prenumeranter, men också för att förbättra säkerheten på din webbplats.

Slutsats

Här! du vet allt som finns att veta om hur du gör din webbplats eller WordPress-tema lyhörd med regeln @media av CSS3. Om vi ​​saknade ett WordPress-tema som du älskar eller som du föredrar, vänligen lämna en länk i avsnittet commentaires nedan.

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Vi inbjuder dig också till dela på dina olika sociala nätverk.

.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
4 aktier
del4
tweet
Enregistrer