gpt4 book ai didi

css - 如何在 Retina Macbook 上测试响应式网站?

转载 作者:太空宇宙 更新时间:2023-11-03 17:30:37 26 4
gpt4 key购买 nike

所以我创建了我的响应式网站。当我在 PC 上测试它并调整浏览器大小以检查较小的屏幕尺寸是否正常工作时,一切都很好。

当我在我的主要机器(MacBook Pro Retina)上进行测试时,如果我将浏览器缩小到更小的尺寸,内容的宽度就会太大。

我认为这与我使用的是 Retina 显示器有关。我需要在我的 CSS 中做些不同的事情吗?

我的响应式 CSS 部分看起来像这样......

@media screen and (min-width: 220px) and (max-width: 300px),
handheld and (min-width: 220px) and (max-width: 300px),
screen and (min-device-width: 220px) and (max-device-width: 300px) {

....

}

@media screen and (min-width: 300px) and (max-width: 440px),
handheld and (min-width: 300px) and (max-width: 440px),
screen and (min-device-width: 300px) and (max-device-width: 440px) {

....

}


@media screen and (min-width: 440px) and (max-width: 720px),
handheld and (min-width: 440px) and (max-width: 720px),
screen and (min-device-width: 440px) and (max-device-width: 720px) {

....

}

@media screen and (min-width: 720px) and (max-width: 980px),
handheld and (min-width: 720px) and (max-width: 980px),
screen and (min-device-width: 720px) and (max-device-width: 980px) {

....

}

@media screen and (min-width: 980px) and (max-width: 1600px),
handheld and (min-width: 980px) and (max-width: 1600px),
screen and (min-device-width: 980px) and (max-device-width: 1600px) {

....

}

最佳答案

正如 connexo 所说,在这种情况下您不必使用 device-widthdevice-width 基本上是指设备的屏幕分辨率,这意味着如果您在桌面上调整浏览器的大小,则媒体查询可能不会生效。

请记住,视网膜显示器的像素数量是普通显示器的两倍。

关于css - 如何在 Retina Macbook 上测试响应式网站?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30661568/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com