(スマートフォン表示)フォントサイズを指定すると指定していない要素のサイズが変わる

前提・実現したいこと

(スマートフォン表示時)ある要素のフォントサイズのみ変えたいです。
(他の要素の文字サイズが変わる原因と対策をご教授頂きたく存じます。)

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

スマートフォン表示時、(REST)の部分のspanタグのstyle="font-size:2.8rem;
を2.8remから4remに変更すると、それより前の要素の文字サイズが変わります。

該当のソースコード

<style>
    body {
        display: inline-block;
        font-family: MS PGothic, Osaka, Arial, sans-serif;
    }
</style>
<br><br><br>
<span
    style="font-size: 2.4rem;text-shadow:1px 4px 3px rgba(128, 0, 0, 0.3);color:#551A8B">　　　　　　　ああああああああああああああああああああああ</span>
<br><br><br><br><br>
<span style="font-size: 2.4rem;text-shadow:1px 4px 3px rgba(128, 0, 0, 0.3);color:#551A8B">あああああああああああ</span>
<br><br><br>
<span style="font-size:2.2rem;">　～　あああああああああああ　～</span>
<br><br>
<span style="font-size:2.8rem;background: linear-gradient(white,#73839c);color:#ffffff">Representational
    State
    Transfer(REST)</span>

試したこと

Google Chromeバージョン: 75.0.3770.100（Official Build）（64 ビット）にて、
上記htmlを開き、F12を押下、F5押下(リロード)でスマートフォン表示になったことを確認し、
テキストエディタで(REST)の部分(15行目)のspanタグのstyle="font-size:2.8rem;
を2.8remから4remに変更し、保存し、Google ChromeでF5を押下すると、前の要素の文字サイズが変わることを確認しました。

mankoman

2019/06/23 13:33

そんなことゎ起きませんでしたが、ほかに書いてるソースコードゎありませんか？

hplpjpd

2019/06/27 11:46

>まんこまんさんご連絡ありがとうございます。返信が遅れ、大変申し訳ございません。 user agent stylesheet(Chromeデフォルト)を除き css等他に表示に影響を及ぼすソースコードゎ存在しません。また、動画をアップロードしましたため、ご参照頂けると幸いです。 https://youtu.be/m68CT8vrS44