• Created Date: 01 Dez 2016
  • Author: WEB-4 STUDIO Support
  • Category: Support
  • Rate us:
    (0 Stimmen)

Media Queries - Responsive Design

Media Queries sind nötig um ein responsives Layout für Webseiten zu erstellen. Hier zwei Media Queries Vorlagen für Euer Stylesheet/CSS. Damit sind die gängigsten mobilen Ansichten abgedeckt.


@media (min-width: 1200px)
{
}
@media (min-width: 980px) and (max-width: 1199px)
{
}
@media (min-width: 768px) and (max-width: 979px)
{
    
}
    
@media (min-width: 480px) and (max-width: 767px)
{
}
@media (max-width: 479px)
{
}
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
}

Oder etwas ausführlicher:


/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}
/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* Styles */

}
/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* Styles */

}
/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Styles */

}
/* iPads (landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Styles */

}
/* iPads (portrait) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* Styles */

}
/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* Styles */

}
/* Large screens ----------- */

@media only screen

and (min-width : 1824px) {

/* Styles */

}
/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */
}

Viel Spass...Nadine Röhler | WEB-4 STUDIO

 

Wir konzipieren professionelle Webauftritte und vermarkten diese erfolgreich im Internet. Jede unserer Internetseiten ist einzigartig und eigens für den jeweiligen Kunden zugeschnitten. Wir verwenden keine Baukastensysteme, denn unsere Webseiten sollen sich von der breiten Masse unterscheiden. Kreativität ist gefragt!

WEB-4 STUDIO - Ihre kompetenten Kreativköpfe aus der Region Bayern! Von unserem Firmensitz Oberammergau agieren wir national sowie international für unsere Kunden via Google & Co, Social Media.

WEB-4 STUDIO entwirft ansprechende Print Präsentationen mit Blick auf die Corporate Identity Ihres Unternehmens. Wir bieten Ihnen Printsachen inklusive Grafikdesign und Lieferung schnell, professionell und günstig umgesetzt.

FIRMENANSCHRIFT + BÜROZEITEN

WEB-4 STUDIO Media Solutions

Joomla CMS Agentur
c/o Nadine Röhler
Ludwig-Lang Str. 21cwebhosting by webgo.de
DE-82487 Oberammergau

 

Telefon: Montag - Freitag: 10 - 16 Uhr | +49 (0) 8822 - 2380109

E-Mail Support: Montag - Freitag: 9 - 22 Uhr | support@web-4.eu