Lesefortschritt:

Media-Queries: Diesen CSS-Baukasten benötigen Sie fürs Responsive Webdesign

13. Februar 2021 | CSS-Stylesheet, HTML

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

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.