Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet...

[salzberg]

Hallo nochmals,

hab' versucht, das ganze zu begreifen... komme aber nicht so recht weiter... Offenbar muss heute doch schon wieder vieles anders laufen, als in den Adobe-Videos gezeigt... schade... war noch so schön einfach (für mich) zu verstehen... genauso wie das Video auf dieser Seite hier... aber wenn z.B. px-Angaben wirklich out sind, bringt das wohl nicht nur mit sich. dass das einzige, was man machen muss, ist, px durch entsprechende em-Werte austauschen...

…wünschte, es gäbe solche Videos mit em, viewport, flexbox, aside, etc.

Es ist ja super, dass Menschen sich die Mühe machen, so viele Informationen, wie hier im wiki zusammenzustellen... Doch offenbar benötigt es doch gewisse Grundlagen, um die Dinge zu verstehen, es kommen dann immer schnell weitere Begriffe ins Spiel, die ich alle nicht verstehe.

Ich verstehe auch diese Grafik in diesem Eintrag nicht. Was soll denn damit ausgesagt werden? ... und mit welchen Einheiten werden denn z.b. Viewport- (also Anzeige-) Breiten gemessen?

Was sind realistische Werte? Wieviel Breakpoints sollte man setzen? Wie kann man das ganze ausprobieren, wenn das über die Größenänderung des Browserfensters nicht mehr funktioniert?

Warum gibt es dann diese Desktop-Browser Responsive-Ansichten, wenn sie offenbar in keiner Weise zuverlässig sind? (am Mac in Safari wunderschön angelegt, mit einer große Auswahl an aktuellen (Apple-) Geräten... für was das ganze dann?)

Jetzt aber noch eine ganz praktische Frage: In den Beiträgen wird immer wieder erwähnt, dass es – offenbar auch bei Mobile-First – irgendwo eine Abfrage (oder Angabe?) für die Anzeige-Breite für dieses Anzeigendesign bräuchte. Aber wo soll das denn dann stehen, bzw, wo, im style-sheet steht dann dass, was für alle Anzeigekombinationen gilt?

Ich poste hier mal mein css... (immer noch mit Pixel-Angaben, da mir deren erfolgreiche Ersetzung, wie oben erwähnt, einfach noch nicht klar ist) mit der Frage, ob man den Code nun komplett über den Haufen werfen sollte, oder ob er mit stellenweisen Änderungen vielleicht doch noch brauchbar gemacht werden kann.

Vielen Dank schon mal und einen schönen Tag euch allen.

Quelltext hier@charset "UTF-8";
/* CSS Document */

html,
html *  {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: 400;
	}
	A:hover { color: #333333;  }
	
header {
	padding-top: 20px;
	padding-left: 5px;
	padding-right: 1px;
	}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	padding-left: 5px;
	padding-right: 5px;
}

footer {
	padding-top: 2px;
}

.style-logo {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: larger;
	color: #999999;
	font-weight: 1000
}

.style-nav ul {
	list-style-type: none;
	padding-left: 0;
}
			
.style-nav ul li a {
	text-decoration: none;
	color: #999999;
	text-align: center;
	font-weight: 500;
	display: block;
	padding: 6px;
}	
		
.footer-text {
	font-size: 13px;
	color: #666666;
	text-align: center;
	margin-bottom: 10px;
}
	
.row:before, .row:after {
	content: "";
	display: table;
}
	
.rowa:after {
	clear:both;
}


/*Tablett-Ansicht*/

@media (min-width: 768px){ 

	.style-nav ul li {
		display: inline-block;
	}
	
	.style-nav ul {
	text-align: center;
	}
}

/*Computer-Ansicht*/

@media (min-width: 1024px){ 

	.style-logo {
	float: left;
	}
	
	.style-nav {
	float: right;
	}
}