更新pxをremに変換するプラグインを使うのが最適解だと思います。正義と教わり、忠実にそれに従っています。僕もそれが正しいと信じていた時期もありました。信仰について語りたいと思います。ような切り口では語りません。「まるでpxの選択肢がないかのようにremが無思考に採用される現状」についての指摘となります。10pxとする実装」について物申したいと思います。その前にまずは参考情報です。そもそもルート62.5%はNGとの意見もあります。GAFAはどうなのか?linkGAFAはWebサイトのエキスパートを多数抱えており、サイトの閲覧者、閲覧デバイスも多肢に渡ります。px一つもありませんでした。62.5%での10px=1rem運用ではなく、ベース(ルート)ではpxが使われています。公式ページをピックアップしただけで、彼らのプロダクト全体が必ずしもそういう実装になっているわけではない点にご注意ください。rem信仰の正体linkまずは以下のStackoverflowをご覧ください。f...https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css英文なので要約すると「CSSでpxとremどっちがいいの?」という質問に対して「pxがいい」という回答が399票獲得し、2位のrem(160票)に対し大差でベストアンサーになっています。回答の要約としてはかつてはpx指定だとブラウザで文字サイズが変更できなかった今のブラウザは文字や画像含めpxでも拡縮できるので問題ないすべてpxで開発されていたら直感的だろう?ブラウザデフォルトの文字サイズ設定は効かなくなるけど、設定する人レアじゃない?となっています。「px指定だとブラウザで文字サイズが変更できない」というはるか昔の事情がいまだに一人歩きし、さまざまなブログでpxは絶対に禁止として語られています。CAMPはpx指定ですが、マウスのズームでもブラウザのサイズ変更でも文字が拡大縮小されていることが確認できると思います。この理由でremを推奨するのは完全に時代遅れの認識であると言えます。ルートがpx指定だった場合、ブラウザデフォルトの文字サイズ設定が反映されなくなることは事実です。Safariではデフォルト文字サイズ設定がなくなったので影響を受けません。文字サイズとpxの正確な関係link文字サイズにまつわる変更にはブラウザのズームブラウザのデフォルト文字サイズ設定OSの拡大(ピンチ、アクセシビリティ設定)が存在し、ベースサイズがpxだとブラウザデフォルトの文字サイズ変更を無視してしまいます。各所でremを使っていたとしてもルートでpxが使われていればブラウザのデフォルト文字サイズ設定は効かなくなります。ほとんどのサイトがルートでpxを使っています。px実装で困る人がいるとすれば「ブラウザのデフォルト文字サイズを変更している人」なのですが、大多数のサイトがルートでpxを使う実装になっているため、そのブラウザ設定が形骸化しているのが現状です。前述したGAFAの公式サイトも現状ブラウザデフォルト文字サイズ変更の影響をまったく受けません。そもそもデフォルトの文字サイズが小さくて困っている方はOS自体の解像度を上げるなどしていることが多く、その場合pxだろうがなんだろうがWebサイトの表示も大きくなるため、そこで本質的な課題は解決されます。アクセシビリティへの意識が高いAppleでもpx実装されており、Chromeのデフォルト文字サイズ設定を無視するようになっています。Safariからはデフォルト文字サイズ設定自体がなくなりました。remが適切なシーンとはlinkただし、remが適切なシーンもあります。remだとルートの文字サイズを切り替えることで一括で文字サイズを調整することができます。これはpx実装だとできないことです。そのシーンってある?linkデザイナーと協業してWebサイトやUIを実装したことがあれば、その実装を現実的に発動するシーンがほとんどないことは分かると思います。見出しや通常文字が等倍で小さくなったり大きくなったりするだけで事足りるデザインというのはなかなかないでしょう。結局はパーツ単位で個別にサイズ調整を行うことになります。あればもうpx実装とやっていることは変わりません。XDなどのデザインツールからCSSを抽出する機能がありますが、基本pxベースなのでいちいちremに変換する必要がなくなります。remにまつわる脳の計算リソースを節約することができます。1.4remより14pxのほうが2タイプ少なくすみます。チリも積もればなんとやらです。結局のところlinkルート基準で端末間の文字サイズを一括変更させたいかブラウザデフォルトの文字サイズ設定機能を尊重したいかpxの直感性や周辺ツールとの互換性を重視したいかによって判断すべきかと思います。CAMPでremを見かけたら「なぜremを使うのか?」を聞き、上記の使うべきシーンや実装の直観性をさしおいてもブラウザデフォルト文字サイズ設定を尊重したいという意志が感じられた場合にのみ、remを推奨するようにしています。remを使うのか正確に理解しない状態で「なんとなくいろんなサイトでremを使うよう言われているから」という場合には上記を説明した上で本人に判断を委ねるようにしています。CAMPではXXを使うべき。いう押しつけは一切しません。大事なのは本人が原理原則を理解した上で納得いく選択をすることだと思っています。最後にlinkここまで読まれた方はお気づきだと思いますが、remに「書き方が冗長になる」以外のデメリットはありません。pxという選択が存在するということです。巷のブログや開発現場で、あまりにもpx=悪という言及が目立つので、その点についてもう少し正しい認知を広めたい思いで書きました。「たとえブラウザデフォルト文字サイズ設定が形骸化していたとしても、それに対応する実装は正義では」という意見は理解できますが、その意味では多くの現場は既に「アイコンボタンにarea-labelをつけない」など、本来すべきアクセシビリティ対策を捨てて実装の効率性を優先するという選択をしています。Lighthouseでアクセシビリティ100を切り捨ててデザインを優先するという選択をしているのではないでしょうか?ブラウザデフォルトサイズ設定の現状を考えると、そこへの対応はマストではなくベターな対応だと思っているので、それと実装の直観性どちらをとるかの選択の余地はあるというお話でした。追記linkいろいろ反響をいただいているので以下紹介させていただきます。(最初当記事でルートがbodyとなっていたので修正しました)emについての見解linkemを全体で使う実装はほぼ見かけず僕自身試したこともないので言及しませんでしたが、そもそも「emを使うべきかどうか?」についてはケースバイケースかと思います。emのネストが死を招く云々は周知の事実だと思うのですが、それをしない前提で、たとえば利用規約やブログのポストなど、特定のスコープを大雑把にレスポンシブ対応させたいシーンで僕はemを使います。62.5%は危険説linkこれは盲点でした。詳細は下記ご参照ください。https://qiita.com/akuden/items/24b4ea6caa1b3dc1cccdopen_in_new何にせよルートに文字サイズを指定するとブラウザデフォルトの文字サイズ設定を邪魔するからルートに文字設定は原則NG。この視点に立つと62.5%運用をする時点でremもアクセシビリティに折り合いをつけている状態なので、ルートによる一括サイズ変更をしないのであればpxでいいよね。いう話になるかと思います。(もちろん多少なりともブラウザ文字サイズ設定を反映させるという差異はありますが)開発都合でユーザービリティを犠牲にすべきでないlinkという意見もいくつか見かけました。(下記ツイートのリプライをご参照ください)ユーザービリティ大事という点については完全に同意です。その上で、我々はすでに開発コストの観点からAAAや旧ブラウザ対応を切り捨てています。YouTubeもpx実装ですが、ヘッダーのタブ移動でショートカットを表示するなど、手間をかけてユーザーに寄り添う実装をしています。remにまつわる開発コストとユーザーメリットのトレードオフの話で、ユーザー軽視していいという話ではありません。大前提ユーザービリティへの意識は持った方が良いと思います。そもそもrem開発のコスト高いか?についてlink62.5%対応であれば大したコストはかからないと思います。14pxを1.4remと書くだけなので。潔癖にいく場合それができないのでmixinやスニペットで対応する必要があります。Gulpの改造が必要になるかもしれません。以下の記事でハックの一例が解説されています。えびふらいTwitterでフォントサイズの指定にpxを使うべきかremを使うべきかという論争が起きて軽く盛り上がっていたので僕の中での結論をまとめておきたいと思います。pxとremのお話の本質は、ブラウザデフォルトサイズ設定と開発時の直観性のどちらを取るかということでした。僕はどちらも重要だと思うので、ツールを使い両方を取れる方法を紹介します。https://ebifry.jp/css/px-or-rem/上記の欠点は現開発メンバー及び後任者にそれ専用のスニペットを導入させる必要があるということです。なくば冗長なタイプを強いることになります。そことのトレードオフになると思います。すれば属人的スニペットを各メンバーのローカル環境に導入させる必要もなく、pxで直感的に開発できます。具体的にはすべてのfont-sizeのpxをgrepして0.0625倍して置換することになると思います。(14pxが0.875remになる)調べたところプラグインを見つけたのでこれで良さそうです。Firebaseで正しいWebサービス開発スキルを身につけます。オリジナルのサービスを自分で企画し、自分でリリースします。毎日進捗レビューをビデオ通話で行います。就職できなかったら一切お金をいただきません。興味ある方は気軽にお問い合わせください。詳細を見るサポート質問5,000円/回infoソースレビュー10,000円/回infoトラブルシューティング10,000円/回infoライブコーチング5,000円/30分infoあなたがオーナーです。