Trick # 44 | Dieser Beitrag beinhaltet 296 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Wie oft haben Sie beim Responsive-Webdesign schon dieselben Media-Queries neu geschrieben? Wie oft haben Sie dabei einen Tippfehler fabriziert? Ich für meinen Teil kann es kaum noch zählen. Irgendwann hab ich mir einen Bausatz zum copy/pasten angelegt.
Verwenden Sie einfach folgenden Code im CSS Styleheet (Design/Customizer/Zusätzliches CSS) als Grundgerüst:
/* Grosse Bildschirme über 1405px */
@media only screen and ( min-width: 1406px ) {
/* hier CSS einfügen */
}
/* Laptops & Desktops 1101-1405px */
@media only screen and ( min-width: 1101px ) and ( max-width: 1405px) {
/* hier CSS einfügen */
}
/* Tablets in Landscape-Modus 981-1100px */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
/* hier CSS einfügen */
}
/* Tablets in Portrait-Modus 768-980px */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
/* hier CSS einfügen */
}
/* Smartphones in Landscape-Modus 480-767px */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
/* hier CSS einfügen */
}
/* Smartphones im Portrait-Modus bis 479px */
@media only screen and ( max-width: 479px ) {
/* hier CSS einfügen */
}That’s it. Sie können nun relativ komfortabel Ihre CSS-Anweisungen für die jeweiligen Anzeigen definieren.
Werbung
Vor allem im Responsive-Webdesign stellt uns der CSS-Code ein hilfreiches Utensil zur Seite: Die calc()-Eigenschaft. Werte müssen dabei nicht mehr in Pixel, em oder anderen Einheiten angegeben werden – stattdessen können wir den Code ganz ...
Das Blogmodul kennt eine Rasteransicht und die Ansicht in voller Breite. Die Gestaltungsmöglichkeiten sind damit beschränkt. Eine interessante Form – nämlich die alternierende Anzeige des Beitragsbilds links und rechts – können Sie mit ein ...
Geht es Ihnen wie mir? Ödet Sie die Login-Seite Ihrer WordPress-Website an? Sie können Sie ganz einfach stylen - so dass sie bestens zu Ihrem Webauftritt passt. Heute zeigen wir Ihnen wie das geht.
Den Mobilversionen der Browser lässt sich - vornehmlich unter Android - Farbe geben. Statt in eintönigem Hellgrau erscheint der Mobilbrowser beim Seitenaufruf in Farbe. Ist ganz einfach zu machen und wir zeigen Ihnen wie.
Keine Inhalte gefunden.
Werbung
