Folge dem Video um zu sehen, wie unsere Website als Web-App auf dem Startbildschirm installiert werden kann.
Anmerkung: Diese Funktion ist in einigen Browsern möglicherweise nicht verfügbar.
<div class="flex-container">
<div class="flex-item item1">
<p>leftCol</p>
</div>
<div class="flex-item item2">
<p>rightCol</p>
<p>rightCol</p>
<p>rightCol</p>
<p>rightCol</p>
<p>rightCol</p>
</div>
</div>
.flex-container {
display:flex;
}
.flex-item {
margin:10px;
border:1px solid #000;
}
.item1 {
flex:1;
}
.item2 {
flex:3;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
min-width: 0;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
width: 96%;
margin: 1rem auto;
/*margin: 0;*/
}
}
/*Grafiken*/
@media all {
figure {
min-width: 0;
max-width: 100%;
margin: 0;
}
img {
/*text-align: bottom;*/
min-width: 0;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0;
}
}
/*Listen*/
@media all {
ul,
ol {
padding: 0;
}
li {
list-style-type: none;
}
li::before {
content: "\21d2" " ";
color: green;
/*font-size: 0.8rem;*/
}
dl {
margin: 0.3rem 0;
}
dt,
dd {
margin: 0;
}
}
/*Spezielle Einstellungen*/
@media all {
.stammdaten {
display: flex;
}
.stammdaten figure {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
}
.stammdaten dl {
margin-left: 2rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 300px);
display: flex;
flex-wrap: wrap;
}
.stammdaten dl dt {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 150px;
}
.stammdaten dl dd {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 150px);
}
}
/*Flexbox für IE*/
/*-ms-flex-preferred-size: calc(50% - 1rem);*/
/*Vorlage für das gesamte CSS*/
@media all {
}
/*Vorlage zum Kopieren für Media Queries - Mobile first*/
@media only screen and (min-width: 0px) {
}
/*Vorlage zum Kopieren für Media Queries - Desktop first*/
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<header>
<h1>Profil von Gundula Gause</h1>
</header>
<nav>
</nav>
<main>
<h2>Stammdaten</h2>
<section class="stammdaten">
<figure>
<img src="http://lorempixel.com/250/400/cats/8">
<figcaption>Gundula Gause</figcaption>
</figure>
<div>
<dl>
<dt>Name:</dt>
<dd>Gundula Gause</dd>
<dt>Geburtsort:</dt>
<dd>Schnurrhausen</dd>
<dt>Größe:</dt>
<dd>17,3 cm</dd>
<dt>Augenfarbe:</dt>
<dd>grün</dd>
<dt>Hobbys:</dt>
<dd>Mäuse jagen</dd>
</dl>
</div>
</section>
<h2>Dynamische Daten</h2>
<section class="dynamischedaten">
<p>Hier folgen die dynamischen Daten, entweder auch in Listenform wie bei den Stammdaten oder auf andere Weise. Es macht keinen Spaß sich selbst Daten auszudenken.</p>
<p>Es ist natürlich problemlos möglich diese Datei responsive zu gestalten.</p>
<p>Hinweis: Der Quelltext enthält einige CSS-Angaben, die nicht unbedingt erforderlich sind, die ich aber immer wieder verwende und entsprechend "griffbereit" haben möchte.</p>
</section>
</main>
<footer>
</footer>
</body>
</html>