Media Queries は基本こう使う事に決めた。

スマホ、タブレット。みなさん使っていますか?
普及のスピードはひと段落した感がありますが、仕事では「スマホでも、タブレットでも見れるように。しかもワンソースで。」なんて事が増えてきました。
なので、備忘録として「俺はこう使う!」というのを残しておこうと思います。
(写真は、内容と全く関係ありません。)

PC用

特別に指定はしません。普通に書きます。

タブレット用

ウィンドウサイズが、979ピクセルから768ピクセルのときだけ適用されます。

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

スマホ用

ウィンドウサイズが、767pピクセル以下のときだけ適用されます。

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

その他のやり方

min-device-width とか max-device-width と使ってデバイスの横幅から指定する事もできます。

iPhone用(デバイス横幅が320ピクセル以上、480ピクセル以下の時)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}

iPad用(デバイス横幅が768ピクセル以上、1024ピクセル以下の時)

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

上記の場合、Android端末だとサイズにばらつきがあるので、仕事ではあまり使えそうにないです。
クライアントによりけりですね。
ぶっちゃけ、大手ほど仕事はやりにくくなりますね(笑)。

参考にしたサイト

web帳さん

タイトルとURLをコピーしました