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

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

onYang

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

阅读量272

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/q12as/article/details/126867068

前端专栏收录该内容

11 篇文章

订阅专栏

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

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

#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,根据浏览器页面大小自动变化内容尺寸