@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){ }
看注释也懂了啊。
不同机型可能几像素之差，排版就可能有很大差别。
肯定处女座。
很有必要，做移动端开发，手机分辨率适配是个值得注意的点。iphone手机还好，android手机款型较多，而且屏幕分辨率比例不同。魅族的机器就是个特例，不是标准的16：9。定高元素如果使用px或者rem为单位，肯定要做适配。可以用window.devicePixelRatio查看设备的像素比例，在retina屏幕下，要分清物理像素和独立像素的区别，两者相比即为dPR。详见http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
他这么写是因为他用的是响应式适配，是移动端适配的一种方案。