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

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

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

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

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

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

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

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

話変わりますが…

メディアクエリの書き方

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

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

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

そこが悩ましい種です…

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

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

@media screen and (max-width: 320px){}

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

@media screen and (max-width: 430px){}

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

@media screen and (max-width: 540px){}

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

@media screen and (max-width: 768px){}

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

max-width: 768px…最大の横幅サイズが「768px」まで。

逆に

min-width: 768px…最低の横幅サイズが「768px」以上から。

二つ合わせて記述するなら、

@media (min-width: 320px) and (max-width: 768px)…最低の横幅サイズが「320px」から最大の横幅サイズが「768px」まで。

@media (min-width: 320px) and (max-width: 768px){}

このように書きます。

でも、このように最低～最大までは全く使う機会はないかと…

用途によりますが…

忘備録としてメモメモ…

でも、ランドスケープデザインもしっかりと対応する必要がありますが、また後日に説明しますね。

では、また！