适配不同分辨率的另一种思路:页面缩放transform:scale(a,b) translate(x,y)

最新推荐文章于 2023-05-18 11:22:19 发布

小小1992

最新推荐文章于 2023-05-18 11:22:19 发布

阅读量678

点赞数

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

原文链接：https://www.jianshu.com/p/616d6e42da23

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果

这种方法的思路是把整个页面等比例缩放偏移,上下或者左右多出来的部分留白,所以不会在所有分辨率都适配的很完美,故而,有条件的还是用其他更完美的方法吧.

效果图-左右留白

效果图-上下留白

这种方法是页面的整体缩放,里面的所有内容都会缩放,包括字体,图片等,所以排版布局不会变形.

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="./img/logo.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/index.css">
  <title>数据资产展示页面</title>
</head>

<body>
  <div id="container">
...
  </div>
</body>
</html>

css

html {
  padding: 0;
  margin: 0;
}
body{
  overflow: hidden;
  background: #ccc;
  height: 100vh;
}
#container {
  margin: 0 auto;
  box-sizing: border-box;
  background: url(../img/bj.jpg) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  transform-origin: left top;
  transition: transform 0.2s
}

  screenScale($('#container'));
  function screenScale(element) {
    let width = '1920';
    let height = '1080';
    let offsetWidth = window.innerWidth;
    let offsetHeight = window.innerHeight;
    let top = 0;
    let left = 0;
    let scaleX = offsetWidth / width;
    let scaleY = offsetHeight / height;
    let scale = Math.min(scaleX, scaleY);
    top = (offsetHeight - height * scale) / 2;
    left = (offsetWidth - width * scale) / 2;
    //核心代码
    const transform = `translate(${left}px, ${top}px) scale(${scale})`;
    element.width(width);
    element.height(height);
    element.css({'transform': transform});
  }
  window.onresize = function () {
    screenScale($('#container'));
  }

作者：请叫我吉先生
链接：https://www.jianshu.com/p/616d6e42da23
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。