|
|||
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. |
Sponsored Links |
|
|||
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; } |
Sponsored Links |
|
|||
Ah vielen Dank,hab etwas ähnliches gelesen konnte damit aber nicht wirklich was anfangen
Werde es sobald ich wieder bei der Arbeit bin mal ausprobieren. Edit: Hat alles funktioniert,danke. Geändert von Toxuas (10.06.2015 um 16:50 Uhr) |
|
|||
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) { } 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. |
|
|||
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? |
|
|||
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?
|
|
|||
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 |
|
|||
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 Jetzt wird mir alles klar 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 ? Geändert von Toxuas (16.06.2015 um 14:45 Uhr) |
Stichwörter |
media queries, monitore, responsive design, tablets |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Responsive Webdesign – Bilder automatisch skalieren | Scolex | CSS | 6 | 08.05.2015 15:38 |
Responsive Webdesign - Darstellung auf PC | morklopp | CSS | 1 | 07.08.2013 09:23 |
Hover Ersatz im Responsive Webdesign | Barodscheff | CSS | 1 | 03.04.2013 20:11 |
Responsive Webdesign - Pixel oder Prozent? | axelf | CSS | 12 | 13.11.2012 21:52 |
Responsive Webdesign - Smartphone Hintergrundgrafik soll nicht geladen werden | simon1101 | CSS | 5 | 08.03.2012 22:35 |