高解像度のモニター(Mac Retina など)に適応させるメディアクエリーの書き方
Contents
結論
参考記事
/* 小モニタ 低解像度 */
/* CSSの指定 */
/* 小モニタ 高解像度 */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* CSSの指定 */
}
/* 中モニタ 低解像度 */
@media
only screen and (min-width:768px){
/* CSSの指定 */
}
/* 中モニタ 高解像度 */
@media
(-webkit-min-device-pixel-ratio: 2) and (min-width:768px),
(min-resolution: 192dpi) and (min-width:768px){
/* CSSの指定 */
}
/* 大モニタ 低解像度 */
@media
only screen and (min-width:1200px){
/* CSSの指定 */
}
/* 大モニタ 高解像度 */
@media
(-webkit-min-device-pixel-ratio: 2) and (min-width:1200px),
(min-resolution: 192dpi) and (min-width:1200px) {
/* CSSの指定 */
}
webkit用(-webkit-min-device-pixel-ratio) とその他(min-resolution)で併記します。カンマはORの意味ですね。
以下は参考文献です。
MDN -webkit-device-pixel-ratio
いろんなモニタのdpi/ppiがのっているサイト
メディアクエリの”OR”はカンマ区切りでOK