为了兼容不同设备排版问题,使用media属性对不同屏幕宽度的设备赋予不同的css值
@media (max-width:1920px){ /* 兼容PC */
.qrcodeDiv{ margin-top:18%; margin-left:13%; }
.qrcodeDiv img{ width:250px; }
}
@media (max-width:1024px){ /* 兼容SurfaceDuo */
.qrcodeDiv{ margin-top:15%; margin-left:3%; }
.qrcodeDiv img{ width:320px; }
}
@media (max-width:768px){ /* 兼容iPad */
.qrcodeDiv{ margin-top:17%; margin-left:3%; }
.qrcodeDiv img{ width:240px; }
}
@media (max-width:700px){ /* 兼容SurfaceDuo */
.qrcodeDiv{ margin-top:15%; margin-left:3%; }
.qrcodeDiv img{ width:195px; }
}
@media (max-width:650px){ /* 兼容SurfaceDuo */
.qrcodeDiv{ margin-top:10%; margin-left:3%; }
.qrcodeDiv img{ width:195px; }
}
@media (max-width:600px){ /* 兼容SurfaceDuo */
.qrcodeDiv{ margin-top:12%; margin-left:3%; }
.qrcodeDiv img{ width:195px; }
}
@media (max-width:540px){ /* 兼容SurfaceDuo */
.qrcodeDiv{ margin-top:18%; margin-left:2%; }
.qrcodeDiv img{ width:180px; }
}
@media (max-width:480px){ /* 兼容NokiaN9 */
.qrcodeDiv{ margin-top:-5%; margin-left:3%; }
.qrcodeDiv img{ width:152px; }
}
@media (max-width:414px){ /* 兼容ipone678plus */
.qrcodeDiv{ margin-top:-2%; margin-left:4%; }
.qrcodeDiv img{ width:120px; }
}
@media (max-width:414px) and (max-height:672px){ /* 兼容ipone678plus(键标题栏414x672) */
.qrcodeDiv{ margin-top:0.5%; margin-left:4%; }
.qrcodeDiv img{ width:120px; }
}
@media (max-width:411px){ /* 兼容GalaxyFold */
.qrcodeDiv{ margin-top:5%; margin-left:3%; }
.qrcodeDiv img{ width:103px; }
}
@media (max-width:411px) and (max-height:823px){ /* 兼容Pixel xl */
.qrcodeDiv{ margin-top:-12%; margin-left:3%; }
.qrcodeDiv img{ width:123px; }
}
@media (max-width:390px) and (max-height:719px){ /* 兼容清宏iphone13 */
.qrcodeDiv{ margin-top:-6%; margin-left:3%; }
.qrcodeDiv img{ width:118px; }
}
@media (max-width:390px){ /* 兼容iphone13 ? */
.qrcodeDiv{ margin-top:-6%; margin-left:3%; }
.qrcodeDiv img{ width:118px; }
}
@media (max-width:375px){ /* 兼容ipone678 */
.qrcodeDiv{ margin-top:-1.5%; margin-left:3%; }
.qrcodeDiv img{ width:115px; }
}
@media (device-width:375px) and (max-height:812px){ /* 兼容iphoneX 360x812 */
.qrcodeDiv{ margin-top:-17%; }
}
@media (device-width:375px) and (max-height:667px){ /* 兼容华为p20 360x755 */
.qrcodeDiv{ margin-top:-1.7%; }
}
@media (max-width:360px){ /* 兼容GalaxyFold */
.qrcodeDiv{ margin-top:-5%; margin-left:3%; }
.qrcodeDiv img{ width:110px; }
}
@media (device-width:360px) and (max-height:755px){ /* 兼容华为p20 360x755 */
.qrcodeDiv{ margin-top:-15%; }
.qrcodeDiv img{ width:110px; }
}
@media (device-width:360px) and (max-height:640px){ /* GalaxyS5 360x640 */
.qrcodeDiv{ margin-top:-5%; }
.qrcodeDiv img{ width:110px; }
}
@media (max-width:320px){ /* 兼容ipone4,galaxys5 */
.qrcodeDiv{ margin-top:5%; margin-left:3%; }
.qrcodeDiv img{ width:100px; }
}
@media (max-width:320px) and (max-height:568px){ /* 兼容ipone5 */
.qrcodeDiv{ margin-top:0%; margin-left:3%; }
.qrcodeDiv img{ width:100px; }
}
@media (max-width:280px){ /* 兼容GalaxyFold */
.qrcodeDiv{ margin-top:-28%; margin-left:2.5%; }
.qrcodeDiv img{ width:90px; }
}