Adaptation scheme for large screen

Table of contents:

1 Understanding large-screen devices

2 Large screen adaptation scheme

3 Development Notes

4 large screen project

1. Large screen adaptation solution 1 (rem+fontsize) You need to download rem.js and use rem as the unit for development. You can automatically calculate px into rem through the vscode plug-in

1. No adaptation is used

<!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;
    }

    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>


</body>
</html>

2. Use rem+fontsize to realize the adaptation of large screen

<!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: 24rem;
      height: 13.5rem;
      box-sizing: border-box;
      border: 3px solid red;
    }

    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: .375rem;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script src="./rem.js"></script>
</body>
</html>

2. Solution 2 for large screen adaptation (vw)

1. Use vw to realize the adaptation of large screen

<!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: 100vw;
      height: 56.25vw;
      box-sizing: border-box;
      border: 3px solid red;
    }

    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: 1.5625vw;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
</html>

3. Large screen adaptation solution 3 (recommended)

1. Use scale to realize the adaptation of large screen

<!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>

2. Use scale to realize the adaptation of large screen - dynamic judgment

<!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>

Adaptation scheme for large screen

Guess you like