6月になって日にちが経ちますが…

梅雨入り宣言早く来て、早く梅雨上げ宣言になってほしい気分です…

しかもこっちは早く夏が来て、年中夏であってほしい気持ちでたまりません！

梅雨前線、そろそろ北上してくれへんかな…

天気予報のニュースを見る限り、ずっと九州南下ばっかり停滞してるんじゃねぇか！

早く6月中に北上してくれ！

北上して、6月までに梅雨明け宣言してほしいんやけど！

しかも、今年は「気象病」にならないことを…

話変わりますが…

ランドスケープ対応方法

レスポンシブ対応するためのCSSにメディアクエリの書き方の忘備録です…

こっちはいつも、iPhone Pro MaxとiPadの2種類をメインにメディアクエリを書いたりしていますが…

ほかのスマホの端末のデバイスの横幅が異なったりしていますので…

そこが悩ましい種です…

ほかの大手企業のスマホの対応はどないしてんのかたまに中身を見たりしています…

～ここまでコピペ～

スマホとタブレットが横向きに表示をしたときのランドスケープを対応しとかないとダメです。

忘備録として書き込みます。

ここからは縦向きではなく、横向きにした場合を記述しております。

間違えて縦向きのまま、コピペをしないようにね♪

iPhone 5 or iPhone SE または横幅が480pxの場合

@media (orientation: landscape) and (max-width: 480px){}

iPhone Pro Max また横幅が940pxの場合

@media (orientation: landscape) and (max-width: 940px){}

Surface Duo また横幅が720pxの場合

@media (orientation: landscape) and (max-width: 720px){}

iPad Mini また横幅が1024pxの場合

@media (orientation: landscape) and (max-width: 1024px){}

ただ、メディアクエリを書くときの注意があります。

(orientation: landscape)を記述することで横向きのサイズを対応してくれます。

PC版では最近、フルサイズや1200px以上のサイズでデザインするサイトが多くみられます。

1200px以下の横幅サイズになった場合は、必ずメディアクエリを作成して端末をきれいに表示をしとかないとダメですね。

忘備録としてメモメモ…

では、また！