今回はWEBページのデザインと実装方法についての疑問です。
結論から言ってしまうとレスポンジブデザインと端末によるCSS切り替えどっちがいいかって話です。
まず、レスポンシブについて。
レスポンシブの場合、メディアクエリでブラウザ幅が〜〜なら〜〜〜って感じで微調整していきますよね。
メリットはユーザーにはありますが、開発側にはデメリットしかないと思っています。
1ファイルに詰め込みすぎてわけわからなくなりそうです。
次に、端末によるCSS切り替え。
サーバー側でアクセス端末がモバイルを検知したらSP用のCSSを適応。
そうじゃないなら、WEB(PC)用のCSSを適応。
といった風にしている現場も多々ありました。
<?php if ($isMobile) { $mode = 'sp'; } else { $mode = 'web'; } ?> <link rel="stylesheet" href="css/<?= $mode ?>/style.css">
css
┣sp
┗web
みたいな感じです。
これだと、開発者視点だとすごく分かりやすくて管理もしやすいです。少なくとも僕は。
で、僕はレスポンシブってイコール、メディアクエリーだと思っています。
みんなレスポンシブ、レスポンシブっていうけど、モバイル端末の画面は、PCのブラウザみたいに画面端ドラッグして可変させることなんかできないからレスポンシブって必要ないんじゃないのかなと思っています。
style.cssというcssファイルは、SPもWEBも共通で、メディアクエリによって端末毎のスタイルを定義しているケースで考えると、やっぱり画面幅が固定のモバイル端末ではメディアクエリは意味がなく、WEBで有効かと思っています。(SPでは無効ということではありません)
一方で、web/style.cssとsp/style.cssという2つのcssファイルを用意し、
web/style.cssは基本的にpx構成で、
sp/style.cssはiphone4やiphone6plusやipadなどのスクリーンサイズが異なる端末にも対応するために基本的に%指定で構成すれば、メディアクエリなんか必要ないと思うわけです。
これについて、なんかおかしいと思う方がいましたらどこがどうおかしいのか指摘お願いします。
ここまで書いてなんかちょっとまとめてスッキリした感があります。
で、僕はレスポンシブってイコール、メディアクエリーだと思っています。
これは誤りかもしれません。
要はメディアクエリーを使うか使わないかの違いかな。。。
回答6件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/24 15:54
2018/03/25 10:26