Responsive Design mit Medienabfrage: Bildschirmgröße?

Question

Ich arbeite auf Responsive gestaltete Website mit Medienabfragen. Aber ich weiß nicht, wie ich eine gute Breite nehmen soll.

Wie Sie auf dieser Tabelle sehen können, gibt es eine Menge verschiedener Auflösung auch nur für einen einzigen Gerätetyp. 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 zu verwenden ist.

Vorerst bin ich mit dieser:

Mobile First

@media Bildschirm und (min-width: 720px) => phablet

@media Bildschirm und (min-width: 768px) => Tablet

@media Bildschirm und (min-width: 1024px) => Desktop

Vielen Dank für jede Beratung oder recomendations!

Answer 1

Responsive Webdesign (RWD) ist ein Web-Design-Ansatz bei Crafting Websites richtet Erfahrung eine optimale Anzeige zu liefern

Wenn Sie Ihre ansprechende Website-Design sollten Sie die Größe des Bildschirms betrachten und nicht die Gerätetyp. Die Medienabfragen helfen Ihnen dabei.

Wenn Sie Ihre Website pro Gerät stylen möchten, können Sie den Wert user agent verwenden. Dies wird jedoch nicht empfohlen, da Sie Ihren Code für neue Geräte, neue Browser, Browserversionen etc. möglichst lange beibehalten müssen mit der Bildschirmgröße ist das alles egal.

Sie können einige Standardauflösungen sehen in this link.

ABER, meiner Meinung nach sollten Sie zuerst Ihre Website-Layout zu entwerfen, und dann nur mit Medienabfragen anpassen, um mögliche Bildschirmgrößen zu passen.

Warum? Wie ich bereits sagte, die Bildschirmauflösungen sind groß und wenn Sie eine mobile Version entwerfen, die auf 320px ausgerichtet ist, wird Ihre Website nicht auf 350px oder 400px Bildschirm optimiert.

TIPS

1. Wenn eine ansprechende Seite entwerfen, öffnen Sie sie in Ihrem Desktop-Browser und die Breite des Browsers zu sehen ändern, wie die Breite des Bildschirms Ihr Layout und Stil beeinflusst.
2. Verwenden Sie Prozent statt Pixel, es wird Ihnen die Arbeit erleichtern.

Beispiel

Ich habe eine Tabelle mit 5 Spalten. Die Daten sehen gut aus, wenn die Bildschirmgröße größer als 600 px ist, also füge ich einen Haltepunkt bei 600 px hinzu und blende 1 weniger wichtige Spalte aus, wenn die Bildschirmgröße kleiner ist. Geräte mit großen Bildschirmen wie Desktops und Tablets zeigen alle Daten an, während Mobiltelefone mit kleinen Bildschirmen einen Teil der Daten anzeigen.

---

Geisteszustand

nicht direkt auf die Frage bezogen, aber wichtigen Aspekt in Responsive Design. Responsive Design bezieht sich auch auf die Tatsache, dass der Benutzer einen anderen Geisteszustand bei der Verwendung eines Mobiltelefons oder eines Desktops haben. Wenn Sie zum Beispiel abends Ihre Bankseite öffnen und Ihre Bestände überprüfen, möchten Sie möglichst viele Daten auf dem Bildschirm sehen. Wenn Sie die gleiche Seite in Ihrer Mittagspause öffnen, möchten Sie wahrscheinlich einige wichtige Details und nicht alle Grafiken des letzten Jahres sehen.

Answer 2

einen Blick auf diese ... http://getbootstrap.com/

Für große Websites, die ich Bootstrap und manchmal verwenden (für einfache Websites) ich mit einigen @mediaqueries den Stil erstellen. Es ist sehr einfach, denke nur den ganzen Code in Prozent.

.container { 
max-width: 1200px; 
width: 100%; 
margin: 0 auto; 
} 

Im Inneren des Behälters, Ihre Struktur muss wie diese Breiten in Prozent ...

.col-1 { 
width: 40%; 
float: left; 
} 

.col-2 { 
width: 60%; 
float: left; 
} 

@media screen and (max-width: 320px) { 
.col-1, .col-2 { width: 100%; } 
} 

In einigen einfachen Schnittstellen, wenn Sie das Projekt in dieser Art und Weise zu entwickeln beginnen, werden Sie große haben Es besteht die Möglichkeit, eine voll reaktionsfähige Site mit Breakpoints zu erstellen, um den Fluss der Objekte anzupassen.

Answer 3

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

Answer 4

Die Rasterweiten Bootstrap v3.x Anwendungen sind wie folgt:

• Extra small devicesPhones(<768px)/.col-xs-
• Small devicesTabletten(≥768px)/.col-sm-
• Medium devicesDesktops(≥992px)/.col-md-
• Large devicesDesktops(≥1200px)/.col-lg-

Also, das sind gut in der Praxis gut zu bedienen und arbeiten.

Answer 5

i Mine bieten wird, weil @muni s Lösung ein bisschen übertrieben für mich

Anmerkung war: wenn Sie benutzerdefinierte Definitionen für mehrere Auflösungen zusammen hinzufügen möchten, sagen Sie etwas wie folgt aus:

//mobile generally 
@media screen and (max-width: 1199) { 

     .irns-desktop{ 
     display: none; 
     } 

     .irns-mobile{ 
     display: initial; 
     } 

    } 

Be sicher, diese Definitionen über die genauen Definitionen hinzuzufügen, so dass es richtig kaskadiert (zB 'Smartphone-Porträt' muss im Vergleich zu '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