css - 使用 Bootstrap 在视网膜显示上的 CSS 断点

Question

我想知道如何在视网膜显示器上设置 CSS 媒体查询以使其与较小的笔记本电脑屏幕相同。

它目前在我的 1920 x 1080 屏幕的 Mac 上看起来像这样

我希望它像在较小的屏幕上一样

当前的媒体查询是：

@media screen and (min-width: 500px) and (max-width: 767.9px)
@media screen and (min-width: 768px)
@media screen and (min-width: 960px)
@media screen and (min-width: 992px)
@media screen and (min-width: 1200px)
@media screen and (min-width: 1440px)
@media screen and (min-width: 1660px)
@media screen and (min-width: 1920px)

希望任何人都可以帮助我。

标签： csstwitter-bootstrapbootstrap-4

Answer 1

用于包括高分辨率图形，但仅适用于可以使用它们的屏幕。对于视网膜，您可以使用 -webkit-min-device-pixel-ratio。

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

或其他高分辨率：

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}