Responsive font-size css

フォントの最小・最大サイズ、及びサイズが可変するビューポート幅の範囲を指定すると、CSSを生成します。

{{ form.root_font_size_min }}から{{ form.root_font_size_max }}の間で入力してください。
%

{{ form.root_font_size }}%

{{ form.min_font_size_min }}から{{ form.min_font_size_max }}の間で入力してください。
px

{{ form.min_font_size }}px

{{ form.min_font_size }}から{{ form.max_font_size_max }}の間で入力してください。
px

{{ form.max_font_size }}px

{{ form.min_width_min }}から{{ form.min_width_max }}の間で入力してください。
px

{{ form.min_width }}px

{{ form.min_width }}から{{ form.max_width_max }}の間で入力してください。
px

{{ form.max_width }}px

※1最小フォントサイズが適用される最大のビューポート幅。この幅より狭い場合は最小フォントサイズを適用。

※2最大フォントサイズが適用される最小のビューポート幅。この幅より広い場合は最大フォントサイズを適用。

root:{{ rootFontSize }}

{{ form.element }}:{{ form.elementStyle }}
  • {{ cssOutput }}
  • {{ cssOutputCV }}
    •

    Chromeは可読性を維持するため、10px以下のフォントサイズを指定したテキストも10pxで表示される仕様になっています。
    固定小数点表記で整形しています。

    ご利用に関する注意事項

    PCの設定・ブラウザ・サイト・各種フレームワーク等の環境によって表示が異なる可能性があります。検証ツール等でご確認ください。

    古いバージョンのブラウザには対応していない場合があります。

    ご利用結果についての責任は一切負いかねます。