css之媒体查询做屏幕适配

最新推荐文章于 2025-03-05 18:21:41 发布

TEA.YE

最新推荐文章于 2025-03-05 18:21:41 发布

阅读量1k

点赞数

分类专栏： css的用法合集文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_57540936/article/details/127496487

版权

css的用法合集专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS媒体查询为不同宽度范围内的设备调整#app元素的宽度和缩放比例，确保在1080px到480px的宽屏手机上实现流畅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@media screen and (min-width: 1366px) and (max-width:1760px) {
  #app {
    min-width: 1760px;
    transform: scale(0.87);
    transform-origin: 0 0;
    transition: all 0.3s;
  }
}

// @media screen and (min-width: 1400px) and (max-width:1600px) {
//   #app {
//     min-width: 1760px;
//     transform: scale(0.75);
//     transform-origin: 0 0;
//     transition: all 0.3s;
//   }
// }

@media screen and (min-width: 1080px) and (max-width:1366px) {
  #app {
    min-width: 1366px;
    transform: scale(0.7);
    transform-origin: 0 0;
    transition: all 0.3s;
  }

}

@media screen and (min-width: 750px) and (max-width:1080px) {
  #app {
    min-width: 1080px;
    transform: scale(0.55);
    transform-origin: 0 0;
    transition: all 0.3s;
  }
}

@media screen and (min-width: 480px) and (max-width: 750px) {
  #app {
    min-width: 750px;
    transform: scale(0.38);
    transform-origin: 0 0;
    transition: all 0.3s;
  }

}