Googleもレスポンシブを推奨しているので、最近は提案も何となくレスポンシブ寄りになってきた。
どの端末で見ても最適化されているサイトが評価されるらしい。
順位にも影響が出てくる可能性がある・・・コワいねぇ。
レスポンシブ対応で必ず出てくるブレイクポイント。
DWでチャチャっとやるのもいいけど、一応メモしとく。
端末のサイズによってCSSを分ける訳だけど、ひとまずこれでほぼほぼいけるのではと思うコードがコレ。モバイルファーストで書くと、
/* スマートフォン用 */
@media screen and (max-width: 540px) {
}
/* タブレット用 */
@media only screen and (min-width: 541px) and (max-width: 800px) {
}
/* PC用 */
@media only screen and (min-width: 801px) {
}
色々と書き方はあるけど、この書き方がぱっと見て一番意味が解りやすい気がする。
PC用は最小幅が801px、タブレットは最小幅541px〜最大幅800px、スマートフォンの最大幅は540pxという感じ。
該当のサイズの端末で見ると、最適化されたCSSで表示される。
個人的にはスマートフォンでPCサイトが見たい場合もあるし、やっぱり重いので、レスポンシブはなぁと思う時もあるけど、何と言っても1ソース完結という手軽さがある。
でも設計でコケるとこれまた大変なことになるので、初動の段階で仕様をしっかり詰めないといけません。
求める結果とゴールによっては色々な仕様もあり得るので、その辺りはご提案させて頂きます！ (*^-^*)
