zoom内容根据浏览器界面变化

最新推荐文章于 2024-07-01 10:25:53 发布

原创最新推荐文章于 2024-07-01 10:25:53 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用CSS媒体查询来根据不同屏幕宽度调整body元素的缩放比例，以实现自适应布局，确保在不同设备上提供良好的用户体验。

#app {
  height: 100%;
  width: 100%;
}
  @media screen and (max-width: 1920px){
    body{
      zoom:1;
   }
}
@media screen and (max-width:1500px){
    body{
        zoom: 0.78;
    }
}

@media screen and (max-width: 1300px){
    body{
      zoom:0.68;
   }
}
@media screen and (max-width: 1000px){
    body{
      zoom:0.52;
   }
}
@media screen and (max-width: 800px){
    body{
      zoom:0.42;
   }
}
@media screen and (max-width: 650px){
    body{
      zoom:0.33;
   }
}
@media screen and (max-width: 500px){
    body{
      zoom:0.26;
   }
}

通过css的媒体查询设置全局的zoom,根据浏览器页面大小自动变化内容尺寸