很久以前第一次接触移动端需求的时候,考虑的第一个问题就是:怎样在移动端编写自适应的网页设计?
相信很多人都可以不假思索地脱口而出:利用rem。
当时查阅了一些资料,印象里比较深刻的一段介绍(出自知乎)是:对于不同大小宽度的移动端,就好比一张A4还是A3纸,是A3纸的文字更大一些好呢,还是二者的文字一样大比较好。其实有时候A4或者A3纸文字一样大,体验是更好的,这和利用rem按时两种不同的设计理念。
当时还请教了移动团队的开发同事,得到答复:移动原生的文字大小是和屏幕的分辨率有关的。这和我们网页端的设计理念就不相同了,做前端的都知道,写文字大小的时候基本没有考虑过屏幕的分辨率,而更多的是考虑屏幕的尺寸大小。
------------------------------------------分割线-------------------------------------------------
那么,为什么突然想起这个问题了呢?
是因为在看项目的时候,会经常看到@2x、@3x后缀的图片(淘宝就有大量的这样的图片),经查阅:这是和Retina屏有关。Retina技术就是把多个像素应用到更小的物理屏幕尺寸上,这样屏幕会更加细腻。比如iPhone 4的分辨率是640×960 pixels,但为了保持向下兼容性,采用的是320×480 points。因此在IOS开发时,将图片后缀设置为@2x就会被其自动显示为这个图片。但是在默认的浏览器中无法自动识别,但是高版本的浏览器支持devicePixelRatio属性,比如CSS通过媒体:@media screen and (min-device-pixel-ratio:2)设置不同的图片即可。这个属性现在有了更新的替代方案:
@media screen and (min-resolution: 2dppx)
或者使用image-set方法