Ich teste gerade ein responsive flex-box Beispiel von O'Reilly (mobile first) und möchte darin einbauen, dass per media query die unterschiedlichen Bildschirmgrößen auch unterschiedliche font-size bekommen. Ich bekomme trotz media query aber immer nur 1 font-size! Ich habe die beiden CSS Einträge direkt vor dem </style> gesetzt:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Complex Page</title>
<style>
head {display: block;}
head * {display: none;}
</style>
<style contenteditable>
html {
background-color: #eeeee8;
font-family: trebuchet, geneva, sans-serif;
}
body {
background-color: #deded8;
margin: 0;
}
article, aside, footer, header {
padding: 0.5rem;
box-sizing: border-box;
}
header {
background-color: #333;
color: #ccc;
text-align: center;
border-bottom: 1px solid;
}
aside {
background: linear-gradient(to top, white 50%, #deded8 80%);
}
article {
background: linear-gradient(to top, white 50%, #eeeee8 80%);
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
flex: 0 0 content;
}
main {
flex: 1;
}
/* default navigation values */
nav {
display: flex;
}
nav a {
text-align: center;
background: #ccc;
color: black;
}
nav a:hover {
outline: 1px solid #bbb;
color: red;
text-decoration: underline;
}
header nav a {
margin: 0 5px;
padding: 5px 0;
text-decoration: none;
flex: auto;
}
footer {
color: white;
background-color: #333;
}
footer p {
text-align: center;
}
footer p a {
color: #aaa;
}
/* larger screen */
@media screen and (min-width: 30rem) {
body {
max-width: 75rem;
margin: auto;
}
main {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
article {
flex: 80%;
}
aside {
flex: 20%;
}
}
/* funktioniert nur entweder - oder */
body { font-size: calc(16px + 1.5vw); } /* Kleine Viewports 1.5% der Viewportwidth */
@media screen and (min-width: 30rem) { body { font-size: 1rem; } } /* Große Viewports fix damit es nicht ins Unendliche wächst */
</style>
</head>
<body>
<header>
<h1>Site Wide Header</h1>
<nav>
<a href="#1">Home</a>
<a href="#2">About</a>
<a href="#3">Blog</a>
<a href="#4">Careers</a>
<a href="#5">Contact Us</a>
</nav>
</header>
<main>
<article>
<h2>This is the heading of the article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet. Curabitur a felis at sapien ullamcorper fermentum. Mauris molestie arcu et lectus iaculis sit amet eleifend eros posuere. Fusce nec porta orci.</p>
</article>
<aside>
<h3>Aside Heading</h3>
<p>Mauris molestie arcu et lectus iaculis sit amet eleifend eros posuere. Fusce nec porta orci.</p>
</aside>
</main>
<footer>
<p>Copyright © 2017 <a href="#6">My Site</a></p>
</footer>
</body>
</html>Im Beispiel paßt die font-size auf großen Viewports, schrumpft aber bei kleinen Viewports bis ins Unleserliche. Wenn ich die media query wegnehme, paßt es auf kleinen Viewports, wird auf großen aber riesig.
Warum funktioniert das nicht?