Yanor.net/
Wiki
Blog
GitHub
English
./?HTML/body%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%9262.5%25%E3%81%AB%E3%81%99%E3%82%8B
dotNet
ASP.NET MVC
PowerShell
AutoHotKey
シェルスクリプト
PHP
Perl
DBIC
Java
JavaScript
TypeScript
Node.js
HTML
Windows
WSL
Windows Server
Windows アプリ
VSCode
UNIX
FreeBSD
Linux
ネットワーク
PostgreSQL
MySQL
Apache
Samba
Git
Mercurial
Subversion
Vim
SSH
Docker
全文検索
AND検索
OR検索
edit
Follow
HTML
bodyのフォントサイズを62.5%にする
なぜ62.5%にするのか?
HTMLソース内でem(もしくはrem)を使ったサイズ指定を分かりやすくするため。
既定のフォントサイズ16pxなので、1em = 16pxだが、例えば20pxのマージンを取ろうと思っても計算(20px = 1.25em)が面倒。
そこで、body(もしくはhtml)のフォントサイズを62.5%にすると、16px x 62.5% = 10px となり、
20pxのマージンを指定するのには2em(もしくは2rem)にすればよいことになり、計算が簡単になる。
問題点
Chromeで最小フォントサイズを指定していると、そちらが優先される。例えば最小フォントサイズが12pxなら、62.5%を指定しても10pxでなく12pxにり、以後は1em = 12pxとして処理される。
また、IE/EdgeのClearTypeフォントでは62.5%を指定しても10pxでなく9.93pxとして計算される。したがって、100emなど大きな値を指定する場合、他のブラウザとの誤差が無視できなくなる
おそらくemやremを使ったサイズ指定はフォントなどの値が小さい、もしくはごく小さい誤差なら許容できる箇所でだけ使った方がよい。大きなボックスなどのレイアウト指定でもpxで指定した方がよい。
参考
https://qiita.com/YaQ00/items/dc1a739889cc83544aa0
https://stackoverflow.com/questions/21207716/get-rid-of-chrome-min-font-size-of-12px-when-using-62-5-and-em-design
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/106315/
最新の30件
2023-03-16
PostgreSQL/ウィンドウ関数/ROWSで範囲指定する
PostgreSQL/ウィンドウ関数/partition byとgroup byの違い
2023-03-02
PostgreSQL/全般/1対1のテーブルを作成する理由
2023-02-28
JavaScript/React/例外処理
JavaScript/React/例外処理/ErrorBoundaryで捕捉されないエラー
2023-02-27
JavaScript/React/useEffect/useEffectとtry-catchの例外処理
2023-02-22
PostgreSQL/データベース作成
2023-02-13
Windows-アプリケーション/Outlook/PDFのプレビューを有効にする
2023-02-12
ウェブ開発全般/RDBMS/ファクトテーブルとディメンションテーブル
ウェブ開発全般/RDBMS
2023-02-06
Git/設定/Git for Windows/.sshのconfigのパスを変更する
Windows/WSL/CLI
Windows/WSL/CLI/bash.exeの引数のシェル変数をエスケープする
2023-02-02
JavaScript/React/useEffect/useEffectはレンダーの後で呼ばれる
2023-01-23
JavaScript/React/useEffect/いつなぜuseEffectを使うべきか?
2023-01-06
Docker/環境変数/docker composeでホストOSのシェルの環境変数をコンテナに渡す
Docker/環境変数
2022-12-31
Docker/コマンド/docker images/あるイメージを依存してる子イメージを取得する
Docker/コマンド/docker images/あるイメージが依存してるイメージを取得する
2022-12-20
Git/git status/ステージングされたファイルの一覧
2022-12-17
PowerShell/文法/ループ
2022-11-12
UNIX/tmux/copy-modeの右上にある「0/0」の意味
Git/git branch/コミットIDからブランチ名を調べる
2022-11-11
Git/設定/includeIfでgitconfigを読み分ける
2022-10-22
Windows-アプリケーション/VSCode/設定/Settings Syncの同期内容を確認
2022-10-20
Node.js/npm/nodeコマンドに付属するnpmコマンドのバージョン
2022-10-17
JavaScript/React/イベント処理/カリー化を使ったイベントハンドラー関数
JavaScript/React/イベント処理
2022-10-11
Vim/編集/行をソートする
2022-09-08
JavaScript/文法/関数/アロー関数を使ったカリー化
更新履歴一覧
edit
Last-modified: 2018-05-19 (土) 09:58:30