Monique-MS
Neues Mitglied
Hi there,
ich bin neu hier und habe ein kleines (Denk-)Problem bei einem Projekt welches ich gerade vorhabe:
Bei der Abb links a), sieht man die Seite bei 100% Bildschirm-Breite.
Ganz links, das orange umkästelte ist ein SVG (als Überschrift und Beschreibung des Inhaltes) das hier hochkant dargestellt wird.
Wenn man nun die Bildschirm-Breite schmaler macht ( Abb b) ) und/oder man vergrößert die Bildschirmschrift,
dann sollte mein SVG über dem main-Hauptteil, horizontal (über dem Text) stehen (Abb b) ).
Den Übergang von Zustand a zu b mache ich logischerweise mit:
Zustand a
@media screen and (max-width: 480px) { Zustand b }
(Die 480p sind jetzt mal willkürlich gewählt, es soll halt ein sehr schmaler Bildschirmzustand sein.)
Um mir das zu veranschaulichen und um die Unterschiede im Quelltext von a nach b zu erkennen,
habe ich mal zwei seperate websites gestaltet.
a)
b)
Soweit so gut... Ich erkenne hier nun welche Werte sich ändern, aber ich habe nun keine Idee wie ich beides zusammenbringen kann.
Welche Möglichkeiten gibt es diese Werte zu ändern. Und WIE mache ich es.
Könnt ihr mich dabei unterstützen? Ich wäre euch sehr dankbar.
Danke schoneinmal...
Die Moni
ich bin neu hier und habe ein kleines (Denk-)Problem bei einem Projekt welches ich gerade vorhabe:
Bei der Abb links a), sieht man die Seite bei 100% Bildschirm-Breite.
Ganz links, das orange umkästelte ist ein SVG (als Überschrift und Beschreibung des Inhaltes) das hier hochkant dargestellt wird.
Wenn man nun die Bildschirm-Breite schmaler macht ( Abb b) ) und/oder man vergrößert die Bildschirmschrift,
dann sollte mein SVG über dem main-Hauptteil, horizontal (über dem Text) stehen (Abb b) ).
Den Übergang von Zustand a zu b mache ich logischerweise mit:
Zustand a
@media screen and (max-width: 480px) { Zustand b }
(Die 480p sind jetzt mal willkürlich gewählt, es soll halt ein sehr schmaler Bildschirmzustand sein.)
Um mir das zu veranschaulichen und um die Unterschiede im Quelltext von a nach b zu erkennen,
habe ich mal zwei seperate websites gestaltet.
a)
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Testseite001" />
<meta name="keywords" content="Testseite001" />
<meta name="language" content="de" />
<title>Testseite001</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100vh;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
tspan {
font-size: 1.25rem;
}
tspan:last-child {
font-size: 0.87rem;
}
p {
font-size: 1.7rem;
}
main {
flex: 1 0 20em;
display: flex;
flex-direction: row;
overflow: hidden;
}
h1 {
flex: 0 0 4em;
min-height: 3.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
h1 svg {
display: block;
height: 100%;
max-height: 19em;
}
main section {
flex: 1 1 30em;
background-color: #ccc;
}
section {
padding: 0.8rem;
}
</style>
</head>
<body>
<main>
<h1>
<svg viewBox="0 0 50 328" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="42" height="320" stroke-width="5" stroke="orange" fill="none" />
<text x="125" text-anchor="middle" transform="rotate(-90,82,82)">
<tspan x="0" y="25">
"Rick and Morty":
<tspan style="font-size: 1.05rem;">Staffel 7</tspan>
</tspan>
<tspan x="0" y="38">62. Das erstaunliche Leben des Mr. Kakapopoloch</tspan>
</text>
</svg>
</h1>
<section>
<p>
Fooo
</p>
</section>
</main>
</body>
</html>b)
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Testseite001" />
<meta name="keywords" content="Testseite001" />
<meta name="language" content="de" />
<title>Testseite001</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100vh;
width: 100vw;
}
body {
display: flex;
flex-direction: row;
width: 100vw;
height: 100vh;
}
tspan {
font-size: 1.25rem;
}
tspan:nth-child(2) {
font-size: 0.9rem;
}
p {
moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
font-size: 1.1rem;
}
@media screen and (min-width: 480px) {
p {
font-size: 1.75rem;
}
}
@media screen and (max-width: 380px) {
p {
font-size: 0.9rem;
}
}
main {
flex: 1 0 100%;
display: flex;
flex-direction: column;
overflow: scroll;
}
h1 {
flex: 0 0 7em;
max-height: 3.5em;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
h1 svg {
display: block;
height: 100%;
width: 100%;
max-width: 26em;
}
main section {
flex: 1 1 30em;
background-color: #ccc;
}
section {
padding: 0.8rem;
}
</style>
</head>
<body>
<main>
<h1>
<svg viewBox="0 0 328 50" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="320" height="42" stroke-width="5" stroke="orange" fill="none" />
<text x="125" text-anchor="middle">
<tspan x="164" y="25">
"Rick and Morty":
<tspan style="font-size: 1.05rem;">Staffel 7</tspan>
</tspan>
<tspan x="164" y="38">62. Das erstaunliche Leben des Mr. Kakapopoloch</tspan>
</text>
</svg>
</h1>
<section>
<p>
Fooo
</p>
</section>
</main>
</body>
</html>Soweit so gut... Ich erkenne hier nun welche Werte sich ändern, aber ich habe nun keine Idee wie ich beides zusammenbringen kann.
Welche Möglichkeiten gibt es diese Werte zu ändern. Und WIE mache ich es.
Könnt ihr mich dabei unterstützen? Ich wäre euch sehr dankbar.
Danke schoneinmal...
Die Moni
