前端大屏适配方案汇总

举报
码喽的自我修养 发表于 2024/07/26 23:21:39 2024/07/26
【摘要】 前端大屏适配方案汇总

方案一:rem 单位+动态设置 html 的 font-size

动态设置 html 根字体的大小和 body 字体大小(使用 lib_flexible.js插件)

  • 将设计稿的宽(1920)平均分成 24 等份,每一份 80px;
  • html 根字体大小就设置为 80px,即 1rem = 80px,24rem = 1920px(移动端推荐分为 10 份);
  • 将 body 字体大小设置为 16px;
  • 最后需要使用插件或者其他方式将 px 转为 rem 单位:手动、less/scss 函数、cssrem 插件、webpack 插件、Vite 插件等。

lib_flexible.js 代码参考

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;
 
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      // body 字体大小默认为 16px
      document.body.style.fontSize = 16 * dpr + 'px';
    } else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize);
    }
  }
  setBodyFontSize();
 
  // 这里默认平均分成 10 等分(适用移动端)
  // set 1rem = viewWidth / 24 ;(使用pc端)
  function setRemUnit() {
    var rem = docEl.clientWidth / 24; // 1920 / 24 = 80
    docEl.style.fontSize = rem + 'px'; // 设置 html字体的大小 80px
  }
 
  setRemUnit();
 
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit);
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });
 
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body');
    var testElement = document.createElement('div');
    testElement.style.border = '.5px solid transparent';
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines');
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

方案二:vw 单位

  • 直接使用 vw 单位,屏幕的宽默认为 100vw,那么100vw = 1920px, 1vw = 19.2px 。
  • 安装 cssrem 插件, body 的宽高(1920px * 1080px)直接把 px 单位转 vw 单位
  • 其他 px 转 vw 方式:手动、less/scss 函数、cssrem 插件、webpack 插件、Vite 插件

方案三:scale 等比例缩放(推荐)

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值

使用 CSS3 中的 scale 函数来缩放网页,我们可以使用两种方案来实现:

方案一:直接根据宽度的比率进行缩放。(宽度比率 = 网页当前宽 / 设计稿宽)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      ul {
        margin: 0;
        padding: 0;
      }
      body {
        width: 1920px;
        height: 1080px;
        box-sizing: border-box;
        border: 3px solid red;
 
        /* 指定缩放的原点在左上角 */
        transform-origin: left top;
      }
 
      ul {
        width: 100%;
        height: 100%;
        list-style: none;
 
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
 
      li {
        width: 33.333%;
        height: 50%;
        box-sizing: border-box;
        border: 2px solid green;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
 
    <script>
      // 设计稿:  1920 * 1080
      // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)
 
      // 1.设计稿的尺寸
      let targetX = 1920;
      // let targetY = 1080
      // let targetRatio = 16 / 9 // 宽高比率
 
      // 2.拿到当前设备(浏览器)的宽度
      let currentX = document.documentElement.clientWidth || document.body.clientWidth;
      //  1920 * 1080  -> 3840 * 2160
 
      // 3.计算缩放比例 (当前设备的宽度 / 设计稿的宽度)
      let scaleRatio = currentX / targetX; // 参照宽度进行缩放
 
      // 4.开始缩放网页 (缩放的原点在左上角)
      document.body.style = `transform: scale(${scaleRatio})`;
    </script>
  </body>
</html>

方案二:动态计算网页宽高比,决定是是否按照宽度的比率进行缩放。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      ul {
        margin: 0;
        padding: 0;
      }
      body {
        position: relative;
        width: 1920px;
        height: 1080px;
        box-sizing: border-box;
        border: 3px solid red;
 
        /* 指定缩放的原点在左上角 */
        transform-origin: left top;
      }
 
      ul {
        width: 100%;
        height: 100%;
        list-style: none;
 
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
 
      li {
        width: 33.333%;
        height: 50%;
        box-sizing: border-box;
        border: 2px solid green;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
 
    <script>
      // 设计稿:  1920 * 1080
      // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)
 
      // 1.设计稿的尺寸
      let targetX = 1920;
      let targetY = 1080;
      let targetRatio = 16 / 9; // 宽高比率
 
      // 2.拿到当前设备(浏览器)的宽度
      let currentX = document.documentElement.clientWidth || document.body.clientWidth;
      let currentY = document.documentElement.clientHeight || document.body.clientHeight;
      //  1920 * 1080  -> 3840 * 2160
 
      // 3.计算缩放比例
      let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
      let currentRatio = currentX / currentY; // 宽高比率
 
      // 超宽屏
      if (currentRatio > targetRatio) {
        // 如果当前设备的宽高比率大于设计稿的宽高比率,那么就以高度为参照进行缩放,并且居中显示
        scaleRatio = currentY / targetY;
        document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`;
      } else {
        // 4.开始缩放网页
        document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`;
      }
    </script>
  </body>
</html>

三种适配方案对比

vw 相比 rem 的优势

优势一:不需要去计算html的font-size大小,不需要给html设置font-size,也不需要设置body的font-size,防止继承;
优势二:因为不依赖font-size的尺寸,所以不用担心某些原因html的font-size尺寸被篡改,页面尺寸混乱;
优势三:vw相比rem更加语义化。1vw是1/100的viewport大小(即将屏幕分成100份);并且具备rem之前所有的优点。

vw 和 rem 存在的问题

  1. 如果使用rem或vw单位时,在 js 中添加样式时,单位需要手动设置rem或vw。
  2. 第三方库(Element、Echarts等)的字体一般默认都是px单位,因此通常需要层叠第三方库的样式。
  3. 当大屏比例更大时,有些字体还需要相应的调整字号。

scale相比vw和rem的优势

  1. 优势一:相比于vw和rem,使用起来更简单,不需要对单位进行换算
  2. 优势二:因为不需要对单位进行换算,在使用第三方库时,不需要考虑单位转换问题
  3. 优势三:由于浏览器的字体默认最小是不能超过12px,导致rem或vw无法设置小于12px的字体,scale缩放没有这个问题。
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。