PCとスマホで表示する文字サイズを変更する方法

PCとスマホで表示する文字サイズを変更する方法

■HTMLコード
固定ページなどに記入
文字サイズは、large , middle , small の3種類
<!-- PCとスマホで画像や文字サイズを変更表示 -->
<div id="contents">
<div>
<p class="pc-image"><img src="PC用の画像URL" alt="" /></p>
<p class="sp-image"><img src="スマホ用の画像URL" alt="" /></p>
</div>
<div>
<!-- CSSで設定した文字サイズになる -->
<p class="pc-words-large">PCに表示する文字</p>
<p class="sp-words-large">スマホに表示する文字</p>
<!-- 文字サイズをHTMLで指定 -->
<p class="pc-words-large" style="font-size: 88pt;">PCに表示する文字</p>
<p class="sp-words-large" style="font-size: 88pt;">スマホに表示する文字</p>
<!-- 文字サイズと配置をHTMLで指定 -->
<p class="sp-words-large" style="font-size: 68pt;"><span style="text-align: center;">スマホに表示する文字</div>
<p class="sp-words-large" style="text-align: center;"><span style="font-size: 68pt;">スマホに表示する文字</div>
</div>

■CSS
テーマの追記CSS箇所に記入

/* PCとスマホで文字サイズを変更 */
/* 文字サイズ、行間、横配置位置などは、ここで指定 */
/* 画像 */
#contents p.pc-image {
text-align: center;
}
#contents p.sp-image {
display: none;
text-align: center;
}
/* 文字サイズ 大 */
#contents p.pc-words-large {
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 3.5em;
}
#contents p.sp-words-large {
display: none;
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 1.5em;
}
/* 文字サイズ 中 */
#contents p.pc-words-middle {
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 2.0em;
}
#contents p.sp-words-middle {
display: none;
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 1.2em;
}
/* 文字サイズ 小 */
#contents p.pc-words-small {
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 1.0em;
}
#contents p.sp-words-small {
display: none;
margin-top: 0.1em;
margin-bottom: 0.1em;
text-align: center;
font-size: 1.0em;
}

@media only screen and (max-width : 640px){
#contents p.pc-image,
#contents p.pc-words-large,
#contents p.pc-words-middle,
#contents p.pc-words-small {
display: none;
}
#contents p.sp-image,
#contents p.sp-words-large,
#contents p.sp-words-middle,
#contents p.sp-words-small {
display: block;
}
}