Hallo zusammen,
ich bin noch relativ neu in Bootstrap/Less, will das aber für meine Website nutzen. Ich möchte die Überschriften an unterschiedliche Viewports anpassen. Bisher habe ich das so gemacht:
Code
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif; /* Google-Font Open Sans wenn verfügbar, sonst Fallback */
font-style: normal;
font-weight: bold;
}
@media only screen and (min-width: 20em) {
p {
font-size: 0.9em; /* 14,4px; */
}
h1 {
font-size: 1.5em; /* 22px; */
line-height: 1.3em; /* 20.8px */
color: #0c1078;
}
h2 {
font-size: 1.4em; /* 22.4px */
line-height: 1.3em;
color: #1b1e80;
border-bottom: 2px #ed6e30 solid;
}
}
@media only screen and (min-width: 40em) {
aside p {
font-size: 0.9em; /* 14,4px; */
}
h1 {
font-size: 2em; /* 32px; */
line-height: 1.5em; /* 54px */
color: #0c1078;
}
h2 {
font-size: 1.438em; /* 23px */
line-height: 1.3em;
color: #1b1e80;
border-bottom: 2px #ed6e30 solid;
}
}
Alles anzeigen
usw. In Bootstrap finde ich in der variable.less solche Einträge:
CSS: css
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 16px; // /** GEÄNDERT **/
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
Alles anzeigen
Dann gibt es die Media-Queries in Bootstrap wie folgt
Code
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
wo ich die typografischen Definitionen für unterschiedliche Schriftgrößen und Abstände definieren könnte.
Wie könnte das aussehen? Werden diese Queries exakt so am Ende der variables.less angehängt? Und wie sieht das in der index.html aus? Zum Beispiel an dieser Stelle, wo die Überschrift kleiner werden sollte:
Code
<div class="col-md-8">
<h1 class="header">Gemeinschaftspraxis Dr. Bauer</h1><br>
<h2 class="header">Allgemeinmedizin und Innere Medizin</h2>
</div>
Ich bin gespannt auf euere aussagekräftige Unterstützung.
Vielen Dank
Diani