モバイルファースト

2017/2/14（火）天気・・・

自分のサイトをiPhone5sで開いたときです。
今までは画面の小さなiPhone5sで見るとデザインが崩れていました。
「メディアクリエ」というものを使うとスマホ用、タブレット用PC用と分けてることが可能。
そこまでは知っていましたが手を出しませんでした。
しかし自サイトの訪問者数の約6割はスマホからです。
もう「モバイル　ファースト」でいこう、と。
変更をしました。
PCでは今まで通りです。

こんなふうです。
画面の幅が570PX以下になると上記の画面になります。
PC用でも全体の幅は800pxしかないのでタブレット用はないです。
なぜ570pxか。
それは色々いじって決めました。

余談。
何処の世界にも「力技」というものがあると思います。
私の業界では「力技」は当たり前ですが。
今回そのようなこともしました。

赤いところだけ高さが違います。
その他は揃っています。
一つ一つのマスの幅は指定してあり、高さは「auto」です。
文字の行数で高さの違いが出ます。
上記はある程度高さを揃えました。
その揃え方。

コードです。
赤で囲んだ＜　b　 r ＞をなくすと

このように揃います。
これは「力技」っだと思います。