本站公告: 暂无公告....

高分辨率屏幕的样式优化

前端开发 兰亭楼 1评论 577浏览
一般来说,内容类的资源并不需要对高分屏做什么优化,需要优化的是固定的图片类资源。而且通常现在有三种做法:
  • 自定义字体,将扁平化的图标做成字体,可以原生的支持高分屏,因为字体是矢量的。比如前端界用的icon-font,所以在iPhone和rMBP上看起来图标都不会模糊;缺点是有些手机端浏览器不支持,比如“用户量最大的UC浏览器”
  • 矢量图片,嗯,将图标做成SVG格式,也能很完美的兼容到主流手机系统,当然Android 2.3以下版本支持很不好。
  • 2倍图片,嗯,兼容性最好的方案,本文主要说这种方法。

使用媒体查询

这是最简单的方法:
@media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { /* style rules */ }
兼容所有浏览器的话(当然不考虑IE9以下浏览器了),还需要加上各浏览器的前缀:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { /* Style Rules */ }

JS判断

我们可以通过window.devicePixelRatio方法来获取当前屏幕的像素比然后给body或者html标签添加差异化的class,再在样式中针对高分屏用2x的图片就好了:
var dpr = window.devicePixelRatio; if (dpr >=1.5){ $('html').addClass("is-ratina"); 不过既然媒体查询可以做到的事情,就不要用js去reflow页面了。 当然,如果配合CSSgaga的 AutoRetina功能,工作量会减少很多。

转载请注明: 兰亭楼 » 高分辨率屏幕的样式优化

发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)