[转](1条消息) 前端必知：针对高分辨率屏幕的样式优化(转载请删除括号里的内容)

一般来说，内容类的资源并不需要对高分屏做什么优化，需要优化的是固定的图片类资源。而且通常现在有三种做法：

• 自定义字体，将扁平化的图标做成字体，可以原生的支持高分屏，因为字体是矢量的。比如前端界用的icon-font，所以在iPhone和rMBP上看起来图标都不会模糊；缺点是有些手机端浏览器不支持，比如“用户量最大的UC浏览器”
• 矢量图片，嗯，将图标做成SVG格式，也能很完美的兼容到主流手机系统，当然Android 2.3以下版本支持很不好。
• 2倍图片，嗯，兼容性最好的方案，本文主要说这种方法。

使用媒体查询

这是最简单的方法：

1 2 3

12

兼容所有浏览器的话(当然不考虑IE9以下浏览器了)，还需要加上各浏览器的前缀：

1 2 3

@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), 

12

JS判断

我们可以通过

window.devicePixelRatio

1 2 3 4

123

不过既然媒体查询可以做到的事情，就不要用js去reflow页面了。

---------------------
作者：前端独秀
来源：CSDN
原文：https://blog.csdn.net/lumot/article/details/101072503
版权声明：本文为前端独秀原创文章，转载请附上博文链接！

标签：浏览器,高分辨率,必知,screen,高分,括号,only,ratio,pixel
来源： https://blog.csdn.net/jiaoqi6132/article/details/115333971