web-dev-qa-db-de.com

Häufig verwendete CSS-Medienabfragen: Haltepunkte

Ich arbeite an einer Responsive-Website mit CSS-Medienabfragen.

Ist das Folgende eine gute Organisation für Geräte? Telefon, iPad (Quer- und Hochformat), Desktop und Laptop, Großbild

Was sind die gängigen Haltepunktwerte für Medienabfragen?

Ich plane, die folgenden Haltepunkte zu verwenden:

  • 320: Smartphone-Porträt
  • 481: Smartphone-Landschaft
  • 641 oder 768 ???: IPad Portrait ???
  • 961: IPad Landscape/Kleiner Laptop ???
  • 1025: Desktop und Laptop
  • 1281: Breitbild

Was denkst du? Ich habe ein paar Zweifel wie ??? Punkte.

146
Miguel Moura

Anstatt zu versuchen, @media-Regeln auf bestimmte Geräte zu richten, ist es wahrscheinlich praktischer, sie stattdessen auf Ihrem speziellen Layout zu basieren. Verengen Sie also allmählich Ihr Desktop-Browserfenster und beachten Sie die natürlichen Haltepunkte für Ihren Inhalt. Es ist für jede Site anders. Solange das Design bei jeder Browserbreite gut funktioniert, sollte es auf jeder Bildschirmgröße ziemlich zuverlässig funktionieren (und es gibt viele, viele davon da draußen).

182
ralph.m

Ich habe verwendet:

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

Dies hält die Dinge relativ einfach und ermöglicht es Ihnen, etwas anderes für Telefone im Hochformat zu tun (häufig muss ich verschiedene Elemente für sie ändern).

85
boz

Ich benutze 4 Haltepunkte, aber wie ralph.m sagte, ist jede Seite einzigartig. Du solltest experimentieren. Aufgrund der vielen Geräte, Bildschirme und Auflösungen gibt es keine magischen Haltepunkte.

Folgendes verwende ich als Vorlage. Ich überprüfe die Website für jeden Haltepunkt auf verschiedenen Mobilgeräten und aktualisiere CSS für jedes Element (ul, div usw.), das für diesen Haltepunkt nicht richtig angezeigt wird.

Bisher funktionierte das auf mehreren responsiven Websites, die ich erstellt habe.

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {


}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {


}    

UPDATE

Ab September 2015 verwende ich eine bessere. Ich finde heraus, dass diese Medienabfrage-Haltepunkte viel mehr Geräten und Desktop-Bildschirmauflösungen entsprechen.

Alles CSS für den Desktop auf style.css haben

Alle Medienabfragen auf responsive.css: Alle CSS für responsive-Menüs + Medien-Haltepunkte

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

pdate 2019: Laut Hugo-Kommentar unten habe ich 1999px mit maximaler Breite aufgrund der neuen sehr breiten Bildschirme entfernt.

74
Adrian P.

Dies ist aus CSS-Tricks Link

/* 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 */
}
49
Nur Rony

Ich kann Ihnen sagen, dass ich bei 768 nur einen einzigen Haltepunkt verwende - das ist min-width: 768px, Um Tablets und Desktops zu bedienen, und max-width: 767px, Um Telefone zu bedienen.

Ich habe seitdem nicht mehr zurückgeschaut. Die reaktionsschnelle Entwicklung wird so einfach und nicht lästig. Sie bietet auf allen Geräten eine angemessene Erfahrung bei minimalen Kosten für die Entwicklungszeit, ohne dass Sie ein neues Android -Gerät mit einer neuen Auflösung fürchten müssen, die Sie nicht berücksichtigt haben.

17
DannyB

Ziehen Sie in Betracht, die Haltepunkte von Twitter-Bootstrap zu verwenden. mit einer so massiven Adoptionsrate sollten Sie sicher sein ...

10
elewinso

Medienabfragen für Standardgeräte

Im Allgemeinen für Handys, Tablets, Desktops und große Bildschirme

1. Mobiles

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {

    /* Styles */

    }

2. Tabletten

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {

         /* Styles */

    }

. Desktops & Laptops

@media only screen 
and (min-width : 1224px) {

    /* Styles */

}

4. Größere Bildschirme

@media only screen 
and (min-width : 1824px) {

    /* Styles */

}

Im Detail inklusive Hoch- und Querformat

/* 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 */
    }

    /* Tablets, iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* Tablets, iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

    /* Tablets, 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 */
    }

Referenz

8
Suman K.C

@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}
7
himansu

Wenn Sie zu Google Analytics gehen, können Sie sehen, welche Bildschirmauflösungen Ihre Besucher der Website verwenden:

Zielgruppe> Technologie> Browser & Betriebssystem> Bildschirmauflösung (im Menü über den Statistiken)

Auf meiner Website werden ungefähr 5.000 Besucher pro Monat gezählt. Die für die kostenlose Version von responsinator.com verwendeten Dimensionen sind eine ziemlich genaue Zusammenfassung der Bildschirmauflösungen meiner Besucher.

Dies könnte Sie davor bewahren, zu perfektionistisch zu sein.

4
user2933101

Ich benutze immer zuerst den Desktop, zuerst das Handy hat nicht die höchste Priorität, oder? IE <8 zeigt mobile CSS ..

normal css here: 

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}

manchmal auch Sondergrößen. Ich mag nicht bootstrap etc.

4
Marc

Anstatt Pixel zu verwenden, sollten Sie em oder den Prozentsatz verwenden, da dies anpassungsfähiger und flüssiger ist. Sie sollten Ihre Inhalte besser nicht auf Geräte ausrichten:

HTML5 rockrs lesen, Handy zuerst

3
Mukesh

Ihre Haltepunkte sehen wirklich gut aus. Ich habe 768px Auf Samsung-Tablets ausprobiert und es geht darüber hinaus. Daher gefällt mir der 961px Sehr gut. Sie brauchen nicht unbedingt alle, wenn Sie reaktionsschnelle CSS-Techniken wie %width/max-width Für Blöcke und Bilder (auch Text) verwenden.

2
michael

Halten Sie Ihren Code sauber und Stylesheets logisch getrennt nach Bildschirm "Medien" -Typ-Konfig ...


1) Verwenden Sie Himansus Antwort von oben als Referenz: Häufig verwendete CSS-Medienabfragen: Haltepunkte
UND
2) https://www.w3schools.com/css/css3_mediaqueries.asp

Ihre Antwort wäre:

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">

<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">
2
Luigi D'Amico