念佛寺とフォルクローレトップページに戻ります 

画面サイズにより変化するフォントサイズ

管理
ログイン
ユーザー登録

  • フォントサイズの確認
  • 1.1px:絶対値
  • 1.2%:相対値
  • 1.3em:親要素のfont-sizeを基準とした相対値
  • 1.4rem:ルート(html)のfont-sizeを基準とした相対値
  • 1.5vw、vh:ビューポートを基準として単位
  • CSS(style)に

    /*ルート要素のフォントサイズの既定値は通常16pxなので、ルートのフォントサイズを変更していない場合は、1rem = 16pxとなります。*/
    .h1-v {
      font-size: clamp(1.6rem, calc(2.0vw + 2.0rem), 3.6rem);
    }
    .h2-v {
      font-size: clamp(1.4rem, calc(1.5vw + 1.8rem), 3.2rem);
    }
    .h3-v {
    /* 最小1.8rem | SP:2rem | TB:2.5rem | PC:3rem | 最大3.2rem */
    /*##  font-size: clamp(1.8rem, calc(1.25vw + 1.5rem), 3.2rem);*/
      font-size: clamp(1.2rem, calc(1.25vw + 1.6rem), 2.8rem);
    }
    .h4-v {
    /*  font-size: clamp(1.0rem, calc(1.0vw + 1.4rem), 2.4rem);*/
      font-size: clamp(1.0em, calc(1.0vw + 1.4rem), 2.4rem);
    }
    .h5-v {
      font-size: clamp(0.8rem, calc(0.75vw + 1.3rem), 2.0rem);
    }
    .h6-v {
      font-size: clamp(0.6rem, calc(0.5vw + 1.2rem), 1.6rem);
    }
    .p-v {
     /* 最小1.2rem | SP:1.4rem | TB:1.5rem | PC:1.6rem | 最大1.8rem */
    /*## font-size: clamp(1.2rem, calc(0.25vw + 1.3rem), 1.8rem);*/
    /* font-size: clamp(0.4rem, calc(0.25vw + 1.2rem), 1.2rem);*/
     font-size: clamp(1.0em, calc(0.25vw + 1.2rem), 1.2rem);*/

    フォントサイズタイトルをh1のまま

    フォントサイズタイトルを<h1 class='h1-v'>で

    フォントサイズタイトルをh2のまま

    フォントサイズタイトルを<h2 class='h2-v'>で

    フォントサイズタイトルをh3のまま

    フォントサイズタイトルを<h3 class='h3-v'>で

    フォントサイズタイトルをh4のまま

    フォントサイズタイトルを<h4 class='h4-v'>で

    フォントサイズタイトルをh5のまま
    フォントサイズタイトルを<h5 class='h5-v'>で
    フォントサイズタイトルをh6のまま
    フォントサイズタイトルを<h6 class='h6-v'>で

    フォントサイズタイトルをpのまま

    フォントサイズタイトルを<p class='p-v'>で

    美作国新庄宿 浄土宗摂取山念佛寺 | ご意見・ご感想 | サイト名:「浄土宗摂取山念佛寺とフォルクローレ」 | 管理者:田中寛一