zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Webdesign

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.06.2015, 12:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2015
Beiträge: 7
Toxuas befindet sich auf einem aufstrebenden Ast
Beitrag 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.06.2015, 14:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.06.2015, 14:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2015
Beiträge: 7
Toxuas befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 11.06.2015, 08:14
Benutzer
neuer user
 
Registriert seit: 11.10.2013
Beiträge: 78
BamiGorengo befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.06.2015, 09:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 16.06.2015, 13:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2015
Beiträge: 7
Toxuas befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 16.06.2015, 14:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 16.06.2015, 14:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2015
Beiträge: 7
Toxuas befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Stichwörter
media queries, monitore, responsive design, tablets

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:52 Uhr.