关于适配所有移动端屏幕且到固定宽度时居中的写法

最新推荐文章于 2024-02-23 10:37:15 发布

风一样的人1

最新推荐文章于 2024-02-23 10:37:15 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/m0_37867644/article/details/78659587

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <title>图解风云</title>
  <style>
   *{
    margin: 0;
    padding: 0;
   }
   html,body{
    position: relative;
    background: #EEE;
   }
   div{
    position: relative;
   }
   img{
    border: none;
    width: 100%;
    max-width: 750px;
   }
   .img1{
    position: absolute;
    left: 50%;
    margin-left: -375px;
   }
  </style>
</head>
<body>
  <div id='box'>
   <img src='img/tjdj.png' id='img'>
  </div>
  <script>
        function getInsideArr(){
   var w=window.innerWidth || document.documentElement.clientWidth ;
   document.getElementById("box").style.width=w+"px";
   if(w>750){
    document.getElementById("box").style.width=750+"px";
    var div = document.getElementById('box');
                div.setAttribute("class", "img1");
   };
   };
   getInsideArr();
  </script>
</body>
</html>