Door naar hoofdmenu

Responsive Design WordPress met de @media regel CSS3

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Gezien het toenemende gebruik van mobiele apparaten, heeft Google sinds eind april 2015 bestraft voor websites waarvan de pagina's niet klaar zijn voor mobiel. Daarom moet u er voor uw SEO voor zorgen dat uw website zowel op grote als kleinere schermen netjes wordt weergegeven.

ontwerp wordpress responsive rule media css3

In dit artikel laat ik je zien hoe je je website op de pagina kunt zetten met behulp van de regel @media van CSS3.

Het is belangrijk op te merken dat de termen "responsief" en "mobiel-compatibel" vaak door elkaar worden gebruikt ondanks het verschil in hun werkelijke betekenis. Begrijpen wat elk betekent, is belangrijk om ervoor te zorgen dat uw website voldoet aan de nodige criteria voor alle schermformaten.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Laten we dan teruggaan naar waarom we hier zijn.

Responsief en mobiel compatibel

Websites die dat niet zijn niet responsief of mobiel compatibel, worden op alle schermen identiek weergegeven, d.w.z. de versie voor grote schermen wordt overal weergegeven. Op kleinere schermen moet je horizontaal door de pagina scrollen om al hun inhoud te zien. Ze zijn moeilijk te navigeren op deze schermen. 

Ontdek ook deze 8 WordPress plug-ins om het uiterlijk van uw website aan te passen

Een website is Mobile compatibele wanneer het alleen voldoet aan het strikte minimum om op mobiel gezien te worden, wat het nog geen responsive website maakt. Een website kan bijvoorbeeld als mobiel compatibel worden beschouwd als u niet horizontaal hoeft te navigeren. Hierdoor worden de elementen ervan klein en niet te onderscheiden. U moet dan inzoomen om de inhoud ervan te lezen.ontwerp wordpress responsive rule media css3 2

Aan hun kant de websites sympathiek passen zich perfect aan verschillende schermformaten aan. Ze herdefiniëren hun elementen zodat ze gemakkelijk kunnen worden gezien en gebruikt op kleinere schermen. Dit is het type ontwerp dat u voor uw website wilt.

Zie ook onze 10 WordPress plug-ins om een ​​boekingsformulier te maken op uw website

Je kent nu het verschil tussen responsief en compatibel-mobiel. We zullen nu de regel zien @media CSS3 waarmee u uw website kunt bijwerken om responsief te zijn of om eenvoudig WordPress-thema's met responsieve inhoud te maken.

De regel @media van CSS3

Om je thema responsief te maken, heb je de regel nodig @media van CSS3. Kortom, het laat je de stijlen definiëren die je wilt gebruiken voor een bepaald type (grootte) scherm. Je gebruikt het als een andere CSS-regel (met accolades), behalve dat het andere CSS-regels nest.

@media mediatype (expressie) {css-test-selector {eigenschap1: waarde1; eigenschap2: waarde2; }}

In deze structuur de elementen binnen de regel @ media functie alleen wanneer de soort-van-media opgegeven om succesvol te zijn gedetecteerd. Met het gekozen mediumtype kunt u de kenmerken opgeven in termen van afmetingen.

ontwerp wordpress responsive rule media css3 3Ontdek Interface en gebruikerservaring toepassen op WordPress

De regel @media detecteert voor u het type scherm waarmee uw website wordt bezocht en kiest de regels die het beste bij dit type scherm passen. Alle grote browsers hebben de regel al geïntegreerd @media.

Hier is de lijst ter informatie: Chrome , safari, Firefox, IE, opereren et rand.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Definieer de doelschermen

Als u een bestaand WordPress-thema wilt wijzigen, maakt u een back-up van de CSS van deze laatste, zodat u indien nodig terug kunt gaan.

Lees ook ons ​​artikel over Hoe geleidelijk Facebook- en Disqus-reacties te laden

Zoals we in de structuur hebben gezien, moet u doorsturen om het type scherm te definiëren @media het beoogde type scherm. Hier is de lijst met de verschillende soorten schermen:

- alle : voor alle soorten schermen of voor de afmetingen gespecificeerd in uitdrukking
- scherm : voor alle schermen, mobiel, tablet, laptop of desktop
- print : voor printers, als u specifieke stijlen wilt voor de pagina's die kunnen worden afgedrukt
- toespraak : voor schermlezers, als u stijlen voor blinden en slechtzienden wilt.

Er zijn ook operators die u voor het schermtype kunt plaatsen; net zo geen om stijlen weer te geven voor schermen die van een ander type zijn dan degene die is opgegeven of enige om stijlen alleen toe te passen op gespecificeerde schermen. U kunt dus beschikken over:

@media scherm alleen

Definieer stijlen voor schermafmetingen

U kunt gebruiken uitdrukking om meer details te geven over de kenmerken van het scherm. Na @media invoeren en het gevolgd door de uitdrukking. Als u meer dan één uitdrukking gebruikt, moeten ze allemaal worden gescheiden door en het. Hier is een voorbeeld van de structuur:

Scherm met alleen @media en (max-width: 640px) {selector-css-example {/ * Je gebruikelijke CSS hier * /}}

In dit voorbeeld gebruik ik max-width met een waarde van 640px. Dit is om een ​​maximale schermbreedte in te stellen ter grootte van een iPhone of een kleine Android-smartphone. Met dit soort structuur heeft u controle over hoe uw website eruitziet op verschillende apparaten. Hier is een lijst met eigenschappen met betrekking tot afmetingen waarin u kunt gebruiken uitdrukking :

Ontdek ook onze 8 SEO WordPress plugins om de SEO van uw website te optimaliseren

- min breedte et max-width : respectievelijk de minimum en maximum breedte vereist voor de weergave van stijlen in de regel @media. Nog een pixel en stijlen worden niet weergegeven.

- min hoogte et max-height : respectievelijk de minimum en maximum hoogte vereist voor het weergeven van de stijlen in de regel @media. Omdat de meeste schermen zijn ontworpen om pagina's verticaal af te rollen, eigenschappen min-height et max-height worden weinig gebruikt.

Hier is een lijst met schermformaten voor sommige terminals:

- IPhone: 640px
- IPad: 1024px
- Tabletten: 1366px
- Android-smartphone: 640px, 720px, 854px, 960px
- Android extra groot: 1024px, 1066px
- Windows-telefoon: 480
- Windows Phone groot: 768 px
- jong en oud: 320px
- Ultrabook / laptops: 1366 px
- Desktops en tv's: 1920px

Er zijn veel andere eigenschappen die u kunt gebruiken uitdrukking. Als u zich bijvoorbeeld richt op desktops of televisieschermen die afbeeldingen met een beeldverhouding van 16: 9 kunnen weergeven, kunt u een structuur als deze gebruiken:

Alleen @media-scherm en (min-breedte: 1920px) en (device-aspect-ratio: 16/9) {selector-css-example {/ * Je gebruikelijke CSS hier * /}}

 Raadpleeg voor meer complete lijsten en voorbeelden w3schools et Mozilla-ontwikkelaars.

Test de responsieve functionaliteit van uw website

Terwijl u uw WordPress-thema bewerkt of bouwt, of aan het einde als u van verrassingen houdt, moet u het resultaat testen om te zien of het uiteindelijk reageert. Onthoud dat Google kijkt naar websites die niet reageren.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

Zie ook deze 10 WordPress plug-ins om tabbladen op uw blog te maken

Als u niet alle mobiele apparaten heeft waarop u zich richt, zijn er (gelukkig voor onze beurzen) een groot aantal tools om te zien hoe uw website zich aanpast aan verschillende schermen.

Direct in de browser van uw computer kunt u gebruiken Windows Resizer Chrome Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Hieronder ziet u een afbeelding van BlogPasCher in de responsieve ontwerpweergave die standaard bij Firefox wordt geleverd.

css3-media-firefox-responsieve-design-view

Er zijn ook websites gewijd aan de taak:

Responsivepx

css3-media-responsivepx

Deze website heeft de bijzonderheid dat u zelf de afmetingen van het scherm kunt kiezen. Merk op dat deze website de jouwe in een frame laadt. Dus als uw WordPress-thema is ontworpen om niet in een frame weer te geven, is het goed mogelijk dat dit laatste hier niet wordt weergegeven.

IPad Peek

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

Deze website is handig om uw website te testen op de nieuwste Apple-, iPad- en iPhone-apparaten. Voer gewoon uw url in. Merk op dat het onderhevig is aan hetzelfde frameprobleem als responsivepx.

Mobile Phone Emulator

css3-media-mobile-phone-emulator

Op deze website kunt u de uwe testen op kleine schermen en op oudere modellen telefoons die u aan de rechterkant van het scherm selecteert. U kunt ook enkele schermeigenschappen configureren.

Google Mobile Friendly test

css3-media-google-mobile-friendly-test

Dit is een van de belangrijkste tests, zo niet de belangrijkste. Voer gewoon uw adres in de balk in en klik op Analyseren om de test te starten. Na de test toont de tool een rapport en een score. Als de test positief is, des te beter, wordt u niet bestraft door Google.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

Als je geen ontwikkelaar bent, adviseer ik je een lijst met responsieve WordPress-thema's te beginnen.

Aanbevolen bronnen

Ontdek ook andere aanbevolen bronnen die u zullen helpen om uw partners en abonnees beter aan te trekken, maar ook om de beveiliging van uw website te verbeteren.

Conclusie

Alstublieft ! u weet alles wat er te weten valt over hoe u uw website of WordPress-thema responsive kunt maken met behulp van de regel @media van CSS3. Als we een WordPress-thema hebben gemist dat u na aan het hart ligt of waaraan u de voorkeur geeft, laat dan een link achter in de sectie commentaires hieronder.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Wij nodigen u ook uit om delen op uw verschillende sociale netwerken.

...

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
4 aandelen
aandeel4
gekwetter
Enregistrer