Responsive Design mit Medienabfrage: Bildschirmgröße?
Ich arbeite an einer responsiv gestalteten Website mit Medienabfragen. Aber ich weiß nicht, wie man einen guten Breitensatz nimmt.
Wie Sie in dieser Tabelle sehen können, gibt es sogar für einen einzelnen Gerätetyp eine sehr unterschiedliche Auflösung. Und da die Auflösung auf mobilen Geräten immer größer wird, ist es schwer zu wissen, welches Design für eine bestimmte Auflösung verwendet werden soll.
Im Moment verwende ich das:
Mobile zuerst
@media screen und (min-width: 720px) => Phablet
@media screen und (min-width: 768px) => Tablet
@media screen und (min-width: 1024px) => Desktop
Vielen Dank für Ratschläge oder Empfehlungen!
Responsive Web Design (RWD) ist ein Webdesign-Ansatz, der auf das Erstellen von Websites abzielt, um eine optimale Anzeige zu ermöglichen
Wenn Sie Ihre responsive Website entwerfen, sollten Sie die Größe des Bildschirms und nicht den Gerätetyp berücksichtigen. Die Medienabfragen helfen Ihnen dabei.
Wenn Sie Ihre Site nach Gerät formatieren möchten, können Sie den user agent-Wert verwenden. Dies wird jedoch nicht empfohlen, da Sie bei der Verwendung der Bildschirmgröße den Code für neue Geräte, neue Browser, Browserversionen usw. beibehalten müssen , das alles spielt keine Rolle.
Sie können einige Standardauflösungen in diesem Link sehen.
ABER meiner Meinung nach sollten Sie zunächst das Layout Ihrer Website entwerfen und erst dann mit Medienabfragen an die möglichen Bildschirmgrößen anpassen.
Warum? Wie bereits erwähnt, ist die Vielfalt der Bildschirmauflösungen groß. Wenn Sie eine mobile Version entwickeln, die auf 320px ausgerichtet ist, wird Ihre Website nicht auf 350px-Bildschirme oder 400px-Bildschirme optimiert.
TIPPS
- Wenn Sie eine responsive Seite entwerfen, öffnen Sie sie in Ihrem Desktop-Browser und ändern Sie die Breite des Browsers, um zu sehen, wie die Breite des Bildschirms Ihr Layout und Ihren Stil beeinflusst.
- Verwenden Sie einen Prozentsatz anstelle von Pixeln, um die Arbeit zu erleichtern.
Beispiel
Ich habe eine Tabelle mit 5 Spalten. Die Daten sehen gut aus, wenn die Bildschirmgröße größer als 600px ist. Daher füge ich einen Haltepunkt bei 600px hinzu und verbirgt eine weniger wichtige Spalte, wenn die Bildschirmgröße kleiner ist. Auf Geräten mit großen Bildschirmen wie Desktops und Tablets werden alle Daten angezeigt, während Mobiltelefone mit kleinen Bildschirmen einen Teil der Daten anzeigen.
Geisteszustand
Nicht direkt auf die Frage bezogen, sondern wichtiger Aspekt beim Responsive Design. Das Responsive Design bezieht sich auch auf die Tatsache, dass der Benutzer bei der Verwendung eines Mobiltelefons oder eines Desktops eine andere Einstellung hat. Wenn Sie beispielsweise abends die Website Ihrer Bank öffnen und Ihre Aktien prüfen, möchten Sie möglichst viele Daten auf dem Bildschirm. Wenn Sie dieselbe Seite in Ihrer Mittagspause öffnen, möchten Sie wahrscheinlich einige wichtige Details und nicht alle Diagramme des letzten Jahres sehen.
Hier finden Sie Medienabfragen für gängige Gerätehaltepunkte.
/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
Die Bildschirmbreiten Bootstrap v3.x verwendet sind wie folgt:
Extra small devicesTelefone(<768px).col-xs-Small devices_/Tablets(≥768px).col-sm-Medium devices_/Desktops(≥992px).col-md-Large devices_/Desktops(≥1200px)/.col-lg-
Diese sind also gut zu verwenden und funktionieren in der Praxis gut.
Schauen Sie sich das an ... http://getbootstrap.com/
Für große Websites verwende ich Bootstrap und manchmal (für einfache Websites) erstelle ich den gesamten Stil mit einigen @mediaqueries. Es ist sehr einfach, man denke nur an den gesamten Code in Prozent.
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
Innerhalb des Containers muss Ihre Struktur in Prozent so breit sein ...
.col-1 {
width: 40%;
float: left;
}
.col-2 {
width: 60%;
float: left;
}
@media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}
Wenn Sie in einigen einfachen Oberflächen beginnen, das Projekt auf diese Weise zu entwickeln, haben Sie große Chancen, eine vollständig reagierende Site zu haben, die nur Haltepunkte verwendet, um den Fluss von Objekten anzupassen.
ich werde meine zur Verfügung stellen, da die Lösung von @muni für mich ein wenig übertrieben war
hinweis: Wenn Sie benutzerdefinierte Definitionen für mehrere Auflösungen zusammen hinzufügen möchten, sagen Sie Folgendes:
//mobile generally
@media screen and (max-width: 1199) {
.irns-desktop{
display: none;
}
.irns-mobile{
display: initial;
}
}
Stellen Sie sicher, dass Sie diese Definitionen zu den genauen Definitionen hinzufügen, damit sie korrekt kaskadiert werden (z. B. "Smartphone-Porträt" muss gegenüber "Handy im Allgemeinen" gewinnen)
//here all definitions to apply globally
//desktop
@media only screen
and (min-width : 1200) {
}
//tablet landscape
@media screen and (min-width: 1024px) and (max-width: 1600px) {
} // end media query
//tablet portrait
@media screen and (min-width: 768px) and (max-width: 1023px) {
}//end media definition
//smartphone landscape
@media screen and (min-width: 480px) and (max-width: 767px) {
}//end media query
//smartphone portrait
@media screen /*and (min-width: 320px)*/
and (max-width: 479px) {
}
//end media query