小编Tri*_*plr的帖子

CSS中的像素密度,视网膜显示和字体大小

我自己没有用Retina MacBook来测试这些东西,互联网上似乎有很多关于高像素密度显示器网页设计的混淆.

现在,我假设带有Retina显示屏的MacBook上的WebKit将页面缩放了大约两倍的大小,因为大多数网页都不是为了适应更高的像素密度而构建的?

在我看来,设计这些或实际上任何类型的显示器的理想情况是使用ems而不是像你可能做的那样;

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 150%; }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
    body { font-size: 200%; }
}
Run Code Online (Sandbox Code Playgroud)

并且整个页面将相应地缩放.或者是吗?在Retina MacBooks上运行的浏览器上的默认字体大小是16px还是更高?因为如果它更高,缩放效果会倍增.

我想我的问题是; 如果我一直使用ems,我唯一需要做的就是改变每个设备像素比的字体大小?

css pixel retina-display

18
推荐指数
2
解决办法
3万
查看次数

标签 统计

css ×1

pixel ×1

retina-display ×1