質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

684閲覧

mac safariでfont-sizeがカクつく

kjshdfiuasye

総合スコア25

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

0クリップ

投稿2021/06/03 02:59

前提・実現したいこと

希望1:ウィンドウ幅999px以下の時のみ可変のサイズの文字Aと、
どのウィンドウ幅でも固定の文字サイズにした文字Bを
1つのページで混在させたい。

希望2:要素自体にfont-sizeを指定していない場合は親要素(html,bodyは除く)のfont-sizeを継承させたい。(希望3より優先度高い)

希望3:親要素のセレクタにfont-sizeが指定されてない場合はどんなウィンドウ幅でも16pxにしたい。

発生している問題・エラーメッセージ

macのsafariで可変font-sizeにした文字Aが
999px以下にウィンドウ幅を縮めていくと
カクカクと縮まっていく。スーッと縮まるのが理想。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 11 @media print, 12 screen and (min-width: 1000px) { 13 html { 14 font-size: 62.5%/*希望1の対応策*/ 15 } 16 body { 17 font-size: 1.6em;/*希望3の対応策*/ 18 } 19 } 20 21 @media screen and (max-width: 999px) { 22 html { 23 font-size: 1vw/*希望1の対応策*/ 24 } 25 body { 26 font-size: 16px;/*希望3の対応策。こうするとmacSafariで.test1がカクつく*/ 27 } 28 } 29 30 31 *{ 32 font-size: 100%;/*希望2の対応策*/ 33 } 34 35 .test1{ 36 font-size: 12.3rem; 37 } 38 </style> 39</head> 40 41<body> 42 43 44 <div class="test1">TEST1</div><!--ウィンドウ幅999px以下で可変--> 45 <div class="test2">TEST2</div><!--font-sizeを16pxにしたい--> 46 47</body> 48 49</html>

試したこと

https://teratail.com/questions/339325
を質問した時の試行錯誤で、
body {font-size: 16px}

body {font-size: 160%}

body {font-size: 1.6em}
としたら治ったが、999px以下に縮めていくと文字がどんどん小さくなって読めなくなるという
別問題が発生したので新しく質問を投稿しました。

固定単位じゃダメだと思い、
font-sizeのcalcに可変単位であるvwを入れて改善しようと思ったのですが
割り算を使おうとすると
割る方の値に単位が使えなくて断念しました。

補足情報(FW/ツールのバージョンなど)

mac safari バージョン14.1.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

不思議な現象ですね。。。
bodyのpx固定は外して、固定文字サイズにしたい箇所を個別指定ではダメですか??

html

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 11 @media print, 12 screen and (min-width: 1000px) { 13 html { 14 font-size: 62.5%/*希望1の対応策*/ 15 } 16 body { 17 font-size: 1.6em;/*希望3の対応策*/ 18 } 19 } 20 21 @media screen and (max-width: 999px) { 22 html { 23 font-size: 1vw/*希望1の対応策*/ 24 } 25 body { 26 /* font-size: 16px;希望3の対応策。こうするとmacSafariで.test1がカクつく */ 27 } 28 } 29 30 31 *{ 32 font-size: 100%;/*希望2の対応策*/ 33 } 34 35 .test1{ 36 font-size: 12.3rem; 37 } 38 .test2 { 39 font-size: 16px; 40 } 41 </style> 42</head> 43 44<body> 45 46 47 <div class="test1">TEST1</div><!--ウィンドウ幅999px以下で可変--> 48 <div class="test2">TEST2</div><!--font-sizeを16pxにしたい--> 49 50</body> 51 52</html>

投稿2021/06/11 20:04

runnynose

総合スコア497

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kjshdfiuasye

2021/06/14 01:11

ご回答ありがとうございます。前任者が、本文部分の要素ごとにfont-sizeを指定していないことが多くて、font-size未指定の本文要素が大量にあるため、更新の手間を省くために、bodyで指定しようと思った次第です。また、本文のfont-sizeは16pxにすることが多いため、デフォルトでそうなると便利かと思いました。ただ、remも同時に使うので、問題が複雑になってしまっています。機能を欲張りすぎたのかもしれません。
runnynose

2021/06/14 01:16

残念です。。。 その動きを許容してもらうか、CSSを設計し直すしかなさそうですね^^;
kjshdfiuasye

2021/06/14 01:20

おっしゃる通り、カクカクを許容するかcssを設計し直す方が、現実的かもしれません。コメントありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問