XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Responsive Webdesign (http://xhtmlforum.de/showthread.php?t=72102)

Toxuas 10.06.2015 12:57

Responsive Webdesign
 
Guten Tag ich bin im Bereich Responsive Webdesign und Media Queries sehr neu.
Deshalb habe ich folgendes Problem:
Die Webseite Startseite von Hyreka möchte ich auf Tablets mithilfe von Media Queries so ändern das die Schrift größer wird.Allerdings verstehe ich nicht wie die Abfrage der Media Queries lauten muss,da in den technischen Daten der beiden Tablets(Samsung Galaxy Tab Lite und Google Nexus 7(2013)) eine sehr hohe Auflösung aufgelistet ist.
Wie unterscheide ich denn jetzt bspw. Monitore und Tablets mit gleich hoher Auflösung voneinander ?
Habs schon mit einer PPI Abfrage versucht allerdings hat das Galaxy Tab Lite eine PPI die einem normalen Monitor entspricht und deswegen greift die Abfrage sowohl für das Tablet als auch für den Monitor.

cloned 10.06.2015 14:00

Tablets und Smartphones haben zwar einen hohen Pixelwert, der Browser rechnet jedoch mit einem anderen Wert. Um auf diesen Wert zu kommen reicht es meiner Erfahrung aus, die angegebenen Pixelwerte zu halbieren.
Guter Beitrag dazu.
Hier mal eine Ausgangsbasis die du so in etwa verwenden kannst:
Code:

@media only screen and (max-width:64em) {/*960 - 1025*/
body:background-color:green;
}
@media only screen and (max-width:60em){/*768 - 959*/
body:background-color:blue;
}
@media only screen and (max-width:47.9375em){/*481 - 767*/
body:background-color:red;
}
@media only screen and (max-width:30em){/*0 bis 480*/
body:background-color:yellow;
}


Toxuas 10.06.2015 14:36

Ah vielen Dank,hab etwas ähnliches gelesen konnte damit aber nicht wirklich was anfangen :D
Werde es sobald ich wieder bei der Arbeit bin mal ausprobieren.

Edit: Hat alles funktioniert,danke.

BamiGorengo 11.06.2015 08:14

Also meine Breakpoints sehen so aus:

Code:

/* MEDIA QUERIES
*********************************************/

/* Extra small devices (phones, less than 768px) */
/* No media query -> mobile first strategy */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* Large devices (large desktops, 2560px and up) */
@media (min-width: 2560px) {

}

/* 4k Monitors ( 3840px and up) */
@media (min-width: 3840px) {

}

/* for higher resolutions (android and retina) */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {

}

Ich Designe Webseiten generell erst für Mobile Devices. Dann geringe Anpassungen das es auf Tablets gut aussieht, dann etwas mehr Anpassungen damit es auf den Desktop Pcs gut aussieht und zu letzt die Mac und 4k Anpassungen.

Der Vorteil der Mobile first Variante liegt auf der Hand. Wenn man eine Webseite für den PC direkt Optimiert, muss man im Zweifelsfall haufenweise CSS Rules überschreiben und Resetten damit sie auf dem Handy gut aussehen. Bei der Mobile first variante muss man das ganz selten, da ergänzt man in der Regel nur.

Also außerhalb meiner geposteten MediaQuerys die Smartphone Styles. Rest dann in die MediaQueries packen. ;)

cloned 11.06.2015 09:09

Ja, das hätte ich noch ergänzen können. Mobile First wird oft besser angesehen, leider kann ich es bei meinen Projekten nie verwenden. Aber ja, wenn möglich, mobile first. :)

Warum verwendest du eigentlich keine em-Werte für Breakpoints? Und gibt es für diese high-resolution-Displays wirklich keine Variante ohne Prefixes?

Toxuas 16.06.2015 13:55

Moin sorry das ich den Thread wiederbelebe, aber wie würde ich denn bei so einem media query zwischen einem handy und einem tablet mit der gleichen auflösung weil ja bspw. beide mit einer breite von 1980 bei dem query mit max-width:64 em angesprochen werden?

MrMurphy 16.06.2015 14:12

Hallo,

so eine Unterscheidung ist nicht möglich. Zwischen Smartphone-, Tablet- und PC-Auflösungen gibt es ja auch Überschneidungen.

Deshalb werden beim Responsive Design die MediaQueries auch nicht vom Endgerät bestimmt, sondern vom Inhalt der Seite.

Gruss

MrMurphy

Toxuas 16.06.2015 14:38

Was mir gerade klargeworden ist mithilfe dieser Seite :
Viewport Device-Widths for Mobile Devices
Hab die Pixeldichte nicht miteinbezogen , d.h. ich könnte ja Handy und Tablet mit der gleichen Auflösung trotzdem unterschiedlich ansprechen da beide ja eine andere CSS Pixel Ratio haben und sich dadurch ja wieder große Unterschiede in der "richtigen" Auflösung ergeben.Wenn ich also bei dem Handy Nexus 5 und dem Tablet Nexus 7.2 , die ja beide eine AUflösung von 1920 Pixel haben, mir die Pixeldichte anschaue und dadurch die "richtige" Auflösung errechne hab ich aj auch die Möglichkeit beide über einen unterschiedlichhen Media Querie anzusprechen :D


Jetzt wird mir alles klar :D

Edit: Aber wozu benötigt man dann den meta-Tag mit viewport,wenn man einfach für alle Geräte einen Media Querie machen kann und Schriftgrößen etc. anpassen kann ?


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:41 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020