苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持。嗯,迟到的文章,和大家简单的分享下。
一般来说,内容类的资源并不需要对高分屏做什么优化,需要优化的是固定的图片类资源。而且通常现在有三种做法:
- 自定义字体,将扁平化的图标做成字体,可以原生的支持高分屏,因为字体是矢量的。比如前端界用的icon-font,所以在iPhone和rMBP上看起来图标都不会模糊;缺点是有些手机端浏览器不支持,比如“用户量最大的UC浏览器”
- 矢量图片,嗯,将图标做成SVG格式,也能很完美的兼容到主流手机系统,当然Android 2.3以下版本支持很不好。
- 2倍图片,嗯,兼容性最好的方案,本文主要说这种方法。
使用媒体查询
这是最简单的方法:
|
|
兼容所有浏览器的话(当然不考虑IE9以下浏览器了),还需要加上各浏览器的前缀:
|
|
JS判断
我们可以通过
window.devicePixelRatio
方法来获取当前屏幕的像素比然后给body或者html标签添加差异化的class,再在样式中针对高分屏用2x的图片就好了:
|
|
不过既然媒体查询可以做到的事情,就不要用js去reflow页面了。
---------------------
作者:前端独秀
来源:CSDN
原文:https://blog.csdn.net/lumot/article/details/101072503
版权声明:本文为前端独秀原创文章,转载请附上博文链接!