スマホ版の HTML と PC 版の HTML を個別に用意し、スマホから閲覧された場合、PC 版HTMLをすべて隠す...のようなやり方でも大丈夫ですか?

2021年3月15日
ユーザー

例えば、ひとつのヘッダー内に、HTMLを個別に用意してCSSで個別に装飾をして

<div class="smart-phone">(スマホサイズの時に表示したい領域)
<div class="PC">(PC画面サイズで表示したい領域)
@media (min-width:760px)は、{ class="smart-phone”display:noneに。
一方で@media (max-width:759px)は、{ class="PC”display:noneに。

サイズに合わせて片方を表示、非表示という風にやっても良いのでしょうか?
もちろん複雑なデザインでない時は、普通にモバイルファーストのやり方で作り、
モバイルサイズとPCサイズで全く違った複雑なデザインの時は個別に作っておいて
この様なやり方で実行しても大丈夫でしょうか?

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?