CSS media属性的使用-兼容不同设备不同屏幕宽度的写法

最新推荐文章于 2024-04-19 07:53:30 发布

abiao1981

最新推荐文章于 2024-04-19 07:53:30 发布

阅读量1.7k

点赞数

分类专栏： web前端 CSS 文章标签：前端 html

本文链接：https://blog.csdn.net/happyzhlb/article/details/127923500

版权

web前端同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

为了兼容不同设备排版问题，使用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; }
   }