Q&A
chromeで、
chrome://settings/fonts
を開いて、フォントサイズが16になっていますか？
15になっていると、概ね、こういう計算結果になるかな、、、って、思いました。
前提・実現したいこと
rem指定でfont-sizeを書いて、正しくGoogle Chromeに表示させたい。
発生している問題
font-sizeをremで書くと、Google Chromeで小さく表示されてしまう。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="style.css"> 9</head> 10<body> 11 <p>これはテストです</p> 12 <p>これはテストです</p> 13 <p>これはテストです</p> 14 <p>これはテストです</p> 15 <p>これはテストです</p> 16</body> 17</html>
css
1html { 2 font-size: 62.5%; 3} 4 5body { 6 font-size: 1.6em; 7 line-height: 1.7; 8} 9 10p:nth-child(1) { 11 font-size: 1rem; 12} 13 14p:nth-child(2) { 15 font-size: 2rem; 16} 17 18p:nth-child(3) { 19 font-size: 3rem; 20} 21 22p:nth-child(4) { 23 font-size: 4rem; 24} 25 26p:nth-child(5) { 27 font-size: 5rem; 28}
試したこと
px指定すると正しく表示されます。
Firefoxでは正しく表示されていました。
補足情報
Google Chromeは最新版にアップデートしてあります。
font-sizeの確認はブラウザの拡張機能である「WhatFont」を使用しています。
回答2件
0
ページの拡大率が変わっていませんか？
【なぜかChromeで見ていたWebページが大きくなった！ 原因と対策方法 - 窓の杜】
https://forest.watch.impress.co.jp/docs/serial/chrometips/1166592.html
投稿2020/03/21 03:19
総合スコア69400
0
自己解決
Google Chromeのフォントサイズが15pxになっていました。
16pxに変更後、正しく表示されました。
アドバイスをくれた皆様ありがとうございました。
投稿2020/03/21 11:11
総合スコア13
あなたの回答
tips
プレビュー
