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

最新推荐文章于 2024-08-04 19:29:42 发布

onYang

最新推荐文章于 2024-08-04 19:29:42 发布

阅读量185

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/q12as/article/details/126867068

版权

媒体查询 CSS 全局缩放响应式设计屏幕适配

关键词由CSDN通过智能技术生成

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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