Springe zum Hauptinhalt

Responsive Design Wordpress mit der @media Regel CSS3

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Angesichts der zunehmenden Nutzung mobiler Geräte hat Google seit Ende April 2015 Websites bestraft, deren Seiten nicht für Mobilgeräte bereit sind. Folglich müssen Sie für Ihre SEO sicherstellen, dass Ihre Website sowohl auf großen als auch auf kleineren Bildschirmen anständig angezeigt wird.

Entwerfen Sie WordPress Responsive Rule Media CSS3

In diesem Artikel zeige ich Ihnen, wie Sie Ihre Website mithilfe der Regel auf die Seite stellen können @media von CSS3.

Es ist wichtig zu beachten, dass die Begriffe „responsive“ und „mobil-kompatibel“ trotz der unterschiedlichen Bedeutung oft synonym verwendet werden. Um sicherzustellen, dass Ihre Website die erforderlichen Kriterien für alle Bildschirmgrößen erfüllt, ist es wichtig, zu verstehen, was jede einzelne bedeutet.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann lassen Sie uns zurückgehen, warum wir hier sind.

Responsive and Mobile-kompatibel

Websites, die nicht sind weder ansprechbar noch-kompatibeles Mobilwerden auf allen Bildschirmen identisch angezeigt, d. h. die Version für große Bildschirme wird überall angezeigt. Auf kleineren Bildschirmen müssen Sie die Seite horizontal scrollen, um den gesamten Inhalt anzuzeigen. Sie sind auf diesen Bildschirmen schwer zu navigieren. 

Entdecken Sie auch diese 8 WordPress Plugins zur Anpassung des Aussehens Ihrer Website

Eine Website ist Mobile kompatibel wenn es nur das strenge Minimum erfüllt, das auf Mobilgeräten zu sehen ist, was es nicht zu einer reaktionsfähigen Website macht. Beispielsweise kann eine Website als mobilkompatibel angesehen werden, wenn Sie nicht horizontal navigieren müssen. Dies führt dazu, dass seine Elemente klein und nicht mehr zu unterscheiden sind. Sie müssen dann zoomen, um den Inhalt zu lesen.Entwerfen Sie WordPress Responsive Rule Media CSS3 2

Auf ihrer Seite die Websites ansprechbar perfekt an unterschiedliche Bildschirmgrößen anpassen. Sie definieren ihre Elemente neu, damit sie auf den kleinsten Bildschirmen leicht gesehen und verwendet werden können. Dies ist die Art von Design, die Sie für Ihre Website wünschen.

Siehe auch unsere 10 WordPress Plugins zum Erstellen eines Buchungsformulars auf Ihrer Website

Sie kennen jetzt den Unterschied zwischen reaktionsschnellen und kompatiblen Mobilgeräten. Wir werden jetzt die Regel sehen @media CSS3, mit dem Sie Ihre Website für reaktionsschnelle Inhalte aktualisieren oder ganz einfach WordPress-Themen mit reaktionsschnellen Inhalten erstellen können.

Die Regel @media von CSS3

Um Ihr Thema ansprechbar zu machen, benötigen Sie die Regel @media von CSS3. Grundsätzlich können Sie die Stile definieren, die Sie für einen bestimmten Bildschirmtyp (Größe) verwenden möchten. Sie verwenden es wie eine andere CSS-Regel (mit geschweiften Klammern), mit dem einzigen Unterschied, dass es andere CSS-Regeln verschachtelt.

@media Medientyp (Ausdruck) {CSS-Test-Selektor {Eigenschaft1: Wert1; property2: value2; }}

In dieser Struktur die Elemente innerhalb der Regel @ media funktioniert nur, wenn die Art-of-Medien angegeben, um erfolgreich erkannt worden zu sein. Mit der Art des gewählten Mediums können Sie die Eigenschaften in Bezug auf Abmessungen festlegen.

Entwerfen Sie WordPress Responsive Rule Media CSS3 3Entdecken Sie Anwenden von Benutzeroberfläche und Benutzererfahrung auf WordPress

Die Regel @media erkennt für Sie den Bildschirmtyp, mit dem Ihre Website besucht wird, und wählt die Regeln aus, die für diesen Bildschirmtyp am besten geeignet sind. Alle gängigen Browser haben die Regel bereits integriert @media.

Hier ist die Liste zu Ihrer Information: Chrom , Safari, Firefox, IE, Oper et Edge.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Definieren Sie die Zielbilder

Wenn Sie ein vorhandenes WordPress-Theme ändern möchten, erstellen Sie bitte eine Sicherungskopie des CSS des letzteren, damit Sie bei Bedarf zurückkehren können.

Lesen Sie auch unseren Artikel über So laden Sie nach und nach Facebook- und Disqus-Kommentare

Wie wir in seiner Struktur gesehen haben, müssen Sie weiterleiten, um den Bildschirmtyp zu definieren @media die Art des Bildschirms, auf den abgezielt wird. Hier ist die Liste der verschiedenen Bildschirmtypen:

- Alle : für alle Arten von Bildschirmen oder für die in angegebenen Abmessungen Ausdruck
- Bildschirm : für alle Bildschirme, ob Handy, Tablet, Laptop oder Desktop
- drucken : für Drucker, wenn Sie bestimmte Stile für die Seiten wünschen, die gedruckt werden können
- Rede : für Bildschirmleser, wenn Sie Stile für Sehbehinderte wünschen.

Es gibt auch Operatoren, die Sie vor den Bildschirmtyp stellen können. wie nicht um Stile für Bildschirme anzuzeigen, die von einem anderen Typ als dem angegebenen oder sind einzige Stile nur auf bestimmte Bildschirme anwenden. Sie können daher haben:

@media nur Bildschirm

Definieren Sie Stile für Bildschirmabmessungen

Sie können verwenden Ausdruck um weitere Details zu den Eigenschaften des Bildschirms bereitzustellen. Nach @media eingeben . gefolgt vom Ausdruck. Wenn Sie mehrere Ausdrücke verwenden, sollten alle durch getrennt werden .. Hier ist ein Beispiel für die Struktur:

@media only screen und (max-width: 640px) {selector-css-example {/ * Dein übliches CSS hier * /}}

In diesem Beispiel verwende ich max-width mit einem Wert von 640px. Hiermit legen Sie eine maximale Bildschirmbreite fest, die der Größe eines iPhones oder eines kleinen Android-Smartphones entspricht. Mit dieser Art von Struktur haben Sie die Kontrolle darüber, wie Ihre Website auf verschiedenen Geräten aussieht. Hier ist eine Liste von Eigenschaften, die sich auf Dimensionen beziehen, in denen Sie verwenden können Ausdruck :

Entdecken Sie auch unsere 8 SEO WordPress Plugins zur Optimierung der SEO Ihrer Website

- min Breiten et max-width : jeweils die minimale und maximale Breite, die für die Anzeige der in der Regel enthaltenen Stile erforderlich sind @media. Ein weiteres Pixel und weitere Stile werden nicht angezeigt.

- min Höhe et max-height : jeweils die minimale und maximale Höhe, die zum Anzeigen der in der Regel enthaltenen Stile erforderlich ist @media. Da die meisten Bildschirme so konzipiert sind, dass Seiten vertikal abgewickelt werden, gelten Eigenschaften min-height et max-height sind wenig benutzt.

Hier ist eine Liste der Bildschirmgrößen für einige Terminals:

- IPhone: 640px
- iPad: 1024px
- Tabletten: 1366px
- Android-Smartphone: 640px, 720px, 854px, 960px
- Android extra groß: 1024px, 1066px
- Windows Phone: 480
- Windows Phone groß: 768px
- jung und alt: 320px
- Ultrabook / Laptops: 1366px
- Desktops und Fernseher: 1920px

Es gibt viele andere Eigenschaften, in denen Sie verwenden können Ausdruck. Wenn Sie beispielsweise auf Desktops oder Fernsehbildschirme abzielen, auf denen Bilder mit einem Seitenverhältnis von 16: 9 angezeigt werden können, können Sie eine Struktur wie die folgende verwenden:

@media only screen und (min-width: 1920px) und (device-Seitenverhältnis: 16/9) {selector-css-example {/ * Ihr übliches CSS hier * /}}

 Für umfassendere Listen und Beispiele konsultieren Sie w3schools et Mozilla Developpers.

Testen Sie die Reaktionsfähigkeit Ihrer Website

Wenn Sie Ihr WordPress-Theme bearbeiten oder erstellen oder wenn Sie am Ende Überraschungen mögen, sollten Sie das Ergebnis testen, um festzustellen, ob es letztendlich reagiert. Denken Sie daran, dass Google nach Websites sucht, die nicht reagieren.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Siehe auch diese 10 WordPress-Plugins zum Erstellen von Tabs in Ihrem Blog

Da nicht alle Mobilgeräte vorhanden sind, auf die Sie abzielen, gibt es (zum Glück für unsere Börsen) eine Reihe von Tools, mit denen Sie feststellen können, wie sich Ihre Website an verschiedene Bildschirme anpasst.

Direkt in den Browser Ihres Computers können Sie verwenden Fenster Resizer Chrome Browser-Erweiterung, ResponsiveResize, ResizeMe ou Firesizer. Unten sehen Sie ein Bild von BlogPasCher in der Responsive Design-Ansicht, die standardmäßig in Firefox enthalten ist.

css3-media-firefox-responsive-Design-Ansicht

Es gibt auch Websites, die sich dieser Aufgabe widmen:

Responsivepx

css3-media-responsivepx

Diese Website bietet die Besonderheit, dass Sie die Abmessungen des Bildschirms selbst auswählen können. Beachten Sie, dass diese Website Ihre in einen Frame lädt. Wenn Ihr WordPress-Theme so konzipiert wurde, dass es nicht in einem Frame angezeigt wird, ist es durchaus möglich, dass letzteres hier nicht angezeigt wird.

iPad Peek

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

Diese Website ist interessant, um Ihre Website auf den neuesten Apple-, iPad- und iPhone-Geräten zu testen. Geben Sie einfach Ihre URL ein. Beachten Sie, dass es das gleiche Frame-Problem wie responsivepx gibt.

Mobile Phone Emulator

css3-Media-mobile-phone-Emulator

Auf dieser Website können Sie Ihre auf kleinen Bildschirmen und auf älteren Telefonmodellen testen, die Sie auf der rechten Seite des Bildschirms auswählen. Sie können auch einige Bildschirmeigenschaften konfigurieren.

Google Mobile Test auf Optimierung

css3-media-google-mobiler-freundlicher Test

Dies ist einer der wichtigsten Tests, wenn nicht der wichtigste. Geben Sie einfach Ihre Adresse in die Leiste ein und klicken Sie auf Analysieren von Daten um den Test zu starten. Nach dem Test zeigt das Tool einen Bericht und eine Punktzahl an. Wenn der Test positiv ist, werden Sie von Google nicht bestraft.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Wenn Sie kein Entwickler sind, rate ich Ihnen eine Liste der ansprechenden WordPress-Themes zu starten.

Empfohlene Ressourcen

Entdecken Sie auch andere empfohlene Ressourcen, mit denen Sie Ihre Partner und Abonnenten besser verführen, aber auch die Sicherheit Ihrer Website verbessern können.

Fazit

Hier ! Sie wissen alles, was Sie wissen müssen, um Ihre Website oder Ihr WordPress-Thema mithilfe der Regel ansprechbar zu machen @media von CSS3. Wenn wir ein WordPress-Thema verpasst haben, das Ihnen am Herzen liegt oder das Sie bevorzugen, hinterlassen Sie bitte einen Link im Abschnitt commentaires unten.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Wir laden Sie auch dazu ein Teilen Sie in Ihren verschiedenen sozialen Netzwerken.

...

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie4
tweet
Registrieren