Häufig verwendete CSS-Medienabfragen: Haltepunkte

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).

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).

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.

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

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.

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

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

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

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.

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.

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

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.

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">