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.
