微信页面的源代码@media适配了5、6种手机，有必要写那么多吗？

Question

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
@media only screen and (max-device-width :480px){ }
@media only screen and (min-device-width :481px){ }

/*6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

/*6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }

Answer 1

很有必要，做移动端开发，手机分辨率适配是个值得注意的点。iphone手机还好，android手机款型较多，而且屏幕分辨率比例不同。魅族的机器就是个特例，不是标准的16：9。定高元素如果使用px或者rem为单位，肯定要做适配。可以用window.devicePixelRatio查看设备的像素比例，在retina屏幕下，要分清物理像素和独立像素的区别，两者相比即为dPR。详见http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

Answer 2

他这么写是因为他用的是响应式适配，是移动端适配的一种方案。

Answer 3

看注释也懂了啊。

不同机型可能几像素之差，排版就可能有很大差别。

肯定处女座。