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%; }
}

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

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

解决方法

好的,这是一个很严重的误会(很酷！:)),所以这里简要说明你可能想做什么.

首先,任何最近的iPhone / iPod / iPad或许多Android手机都有Hi DPI屏幕,所以你可能已经有了测试的东西.如果没有,而且你正在做这个专业,只要买一个4G iPod Touch.

在工作方面,99％的东西,你什么都不需要.如果您的建议有效,那么大多数网站的大小将是四分之一,互联网将被破坏.

对于字体,SVG,CSS框阴影,渐变和任何其他CSS绘制的东西,这一切都很好.那些东西看起来很棒,没有任何额外的工作. (所以为什么我们一直在推动CSS中的一切.)

对于位图(即png,jpg,gif),所有您需要做的是为图像提供2倍的分辨率,但大小与正常相同.

例如,如果您的网页的图像是100像素乘100像素,您可以提供一个200像素×200像素的图像,但是以CSS格式指定,或者在HTML中指定为100像素乘100像素的属性.

这样做的原因是屏幕上的像素与CSS像素不同.这是一件好事,因为如我所说,事情会很小.

我猜,在事后看来,将CSS单位称为CSS,可能会有所不同,比如点或某些东西,但是你可以去.

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

解决方法

相关文章