CSS对高分辨率屏幕适配
@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi) {
/* 针对Retina屏幕重置图片大小 */
img {
width: 50%;
height: auto;
}
}
在高清时代，高分辨率屏幕成为了普及化趋势。但其分辨率比例与普通屏幕不同，因此普通的Web
页面会
显示变形、失真等问题，影响
用户体验。为
解决该问题，CSS提供了一些样式技巧来适配高分辨率屏幕：
1.
图片重置：高分辨率屏幕拥有更密集的像素，
图片在Retina屏幕上变得过于小，因此需要使用CSS来重置
图片大小。通过 @media
查询来实现，只要检测到
用户的设备和浏览器
支持Retina屏幕，就对
图片进行重置。
2. 利用CSS3特性：可以使用CSS3中的
属性和
函数（例如background-size）来自适应高分辨率屏幕。
总之，对于现代Web设计来说，高分辨率屏幕适配是不可忽视的
一个环节。CSS提供了很多适应不同设备和桌面环境的技术，这些技术可以让你的网站在更多的设备上进行访问，并为
用户提供更好的体验。
