Yanor.net/
Wiki
Blog
GitHub
Sandbox
./?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
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-10-03
JavaScript/クロージャ/stale closure
JavaScript/クロージャ
2023-09-09
JavaScript/React/useEffect/APIリクエストの重複を防ぐ
JavaScript/React/再レンダー/何回目のレンダリングか調べる
JavaScript/React/再レンダー
JavaScript/React/Hooks
2023-08-27
JavaScript/React/Hooks/コンテナコンポーネントからカスタムフックへの移行
it/設定/Git for Windows/Windows Terminalでビジュアルベルを無効にする
Git/GitHub/HTTPSでcloneする
Git/GitHub/HTTPSでcloneする(廃止)
2023-07-30
開発手法/書籍/データ指向プログラミング
開発手法/書籍
2023-07-22
開発手法/コードレビューvsテスト
FrontPage
開発手法
2023-06-13
Docker/開発/ネットワーク/Proxy環境でイメージをビルドする
Docker/開発/ネットワーク/コンテナのDNSサーバを指定する
Docker/インストール/Proxy環境で使う - Linux
2023-06-11
Node.js/環境構築/Volta/yarnのバージョンを指定してインストールする
2023-06-09
UNIX/tmux/設定ファイル - .tmux.conf
2023-06-07
RecentDeleted
2023-05-23
Docker/インストール/Linuxで一般ユーザーでdockerコマンドを使う
Docker/インストール/Docker ComposeをLinuxにインストール
2023-05-21
Docker/Dockerfile/ENTRYPOINTとCMD
2023-05-20
Node.js/yarn/yarn installの負荷を下げる
2023-05-19
Linux/ネットワーク/ssコマンド
2023-05-17
TypeScript/OOP/区分オブジェクト
2023-05-16
Git/設定/includeIfでgitconfigを読み分ける
JavaScript/OOP/書籍リーダブルコード/update_highlightを再リファクタリング
JavaScript/OOP/書籍リーダブルコード
更新履歴一覧
edit
Last-modified: 2018-05-19 (土) 09:58:30