Responsiv Font Size

Computer: Software & Programmierung HTML & CSS
1

Hallo CSS Spezialisten,

hat jemand eine Vorlage für responsive Font Sizes, die er mir geben kann?
Die Vorlage sollte die meisten mobilen Geräte unterstützen.

Vielen Dank im voraus :wink:

2

Ich weiß jetzt nicht ganz genau, was Du meinst.

Hier findest Du eine schöne Abhandlung zum Thema:

Beatrix

3

Vielen Herzlichen Dank für die rasche AW.

Ich würde Media Queries mit gut lesbarer Front Size benötigen.
z.Bsp: sowie hier im Link nur mit front size:

Es würde reichen wenn es eine Vorlage mit front sizes für die meisten Mediaqueries gibt?

Dank nochmals für die vorige AW. Es wäre echt wenn es sowas gibt? :wink:

4

Vielen Herzlichen Dank für die rasche AW.

Ich würde Media Queries mit gut lesbarer Front Size benötigen.
z.Bsp: sowie hier im Link nur mit front size:
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints1

Es würde reichen wenn es eine Vorlage mit front sizes für die meisten Mediaqueries gibt?

Dank nochmals für die vorige AW. Es wäre echt wenn es sowas gibt? :wink:

5

Hi, Du meinst sicherlich sowas?

Einzubinden über:

 <link rel="stylesheet" href="meinstyle.css">

oder direkt im Kopf der Webseite, Abschnitt „Head“

<style type="text/css">
    
html {
background-color: #e6e9e9;
-webkit-font-smoothing: antialiased;
}

body {
    margin: 0 auto;
    padding: 2em 2em 4em;
    max-width: 90%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}   
    
    #meinFont {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
    
</style>

Du willst jetzt für #meinFont also alle Werte haben?

Korrekt?

Tipp: Google Fonts einbinden/nutzen. https://www.google.com/fonts

Tipp: Den Artikel oben lesen.

Tipp: Meta Tag direkt ganz oben nach einbinden

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width; initial-scale=1.0">

Anders verhält es sich mit den CSS media specifiers, die must Du aber selber schreiben:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Weiss nicht genau was Du vor hast.
Aber nimm doch ein CSS Framework, wie z. B. Bootstrap, das nimmt Dir schon die ganze Arbeit ab :smile:
Dort kannst Du auch gerne zugreifen und dir die CSS media specifiers raus ziehen!

Have fun …