Knowledge/0 编程/原生HTML的页面如何改成自适应大屏.md

主要步骤：

• 定设计稿的主要尺寸
• 引入flexible.js文件
• 划分大屏单位
• 将rem与px进行单位转换
• 特殊尺寸媒体查询

定设计稿的主要尺寸

例如我们这边的设计稿的分辨率尺寸是1920*1080 那我们将其分成24个单元格区域，需要更细一些划分，也可以划分大一些

具体我为了后续转换rem单位使用

引入flexible.js文件

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;
​
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();
​
  // set 1rem = viewWidth / 10
  function setRemUnit() {
     //计算px单位与rem单位转换，划分的单位
    var rem = docEl.clientWidth / 24;
    //var rem = (docEl.clientWidth / 1920) * 80; // 假设设计稿宽度为1920px
    docEl.style.fontSize = rem + "px";
  }
​
  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);

将rem与px进行单位转换

这里相当于1920 / 24 =80 相当于1rem =80px ，直接将原来的css文件中px单位通过1rem=80px这个公式进行转换

下面是参考css

/* 在大屏幕上应用的样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*其中建议body中的宽和高都使用vh和vw单位 */
body, html {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-size: cover;
}
​
.layui-bg-img {
    background-image: url('./image/monitorPlatform/beijing.png'); /* 更换为你的图片路径 */
    background-size: cover; /* 使用 cover 确保背景图像覆盖整个容器 */
    background-position: center;
    background-repeat: no-repeat;
    /* 背景长和宽覆盖100% */
    background-size: 100% 100%;
​
}
.right-part-bottom {
    position: relative;
    right: -22.5875rem;; /* -7px / 80 = -0.0875rem */
    top: 0.375rem; /* 30px / 80 = 0.375rem */
    color: rgba(205, 214, 227, 1);
    font-size: 0.1125rem; /* 9px / 80 = 0.1125rem */
    margin-top: -0.375rem; /* -30px / 80 = -0.375rem */
}
​
​
​
.top-left-part {
    position: absolute;
    top: 0.1625rem; /* 13px / 80 = 0.1625rem */
    left: 18.9375rem; /* 75% 转换为rem较为复杂，这里假设宽度为800px, 则75% = 600px -> 7.5rem */
}
​
.left-part-head {
    position: relative;
    right: 1.676rem;
    color: rgba(205, 214, 227, 1);
    font-size: 0.175rem; /* 14px / 80 = 0.175rem */
}
​
/*滚动大喇叭*/
.pic_icn {
    position: absolute;
    margin-top: -2.5%; /* 百分比保持不变 */
    margin-left: -53.9%; /* 百分比保持不变 */
    width: 0.7rem; /* 56px / 80 */
    height: 0.6rem; /* 48px / 80 */
    background: #3a88d0;
    background: url(image/monitorPlatform/pic_ico.png) no-repeat;
    background-size: 54%; /* 百分比保持不变 */
    float: left;
}
​

处理特定分辨率细节使用媒体查询

要是对特殊分辨率进行更为特定的细节调整可以使用媒体查询进行对特有元素使用新的样式控制

特殊知识点：

区别总结

• min-width 是基于浏览器视口的宽度，因此适用于响应式设计，能够响应用户调整浏览器窗口大小的操作。
• min-device-width 是基于设备屏幕的实际宽度，适用于需要针对特定设备类型优化的设计，而不考虑浏览器窗口的当前大小。

使用建议

• 优先使用 min-width：对于大多数现代响应式网页设计，推荐使用 min-width，因为它能更好地适应各种屏幕尺寸和用户行为（如调整浏览器窗口大小）。
• 特殊情况使用 min-device-width：如果你确实需要根据设备的实际屏幕尺寸来定制样式，比如为某些平板电脑提供特别的布局，那么可以考虑使用 min-device-width。

/* 添加媒体查询 */
/* 尝试使用 max-device-width */
/*媒体查询：1366*768分辨率下的调整*/
@media screen and (min-device-width: 1360px) and (max-device-width: 1370px)  {
    .divGroup {
        height: 3.0rem;
    }
    /* 正力重点参数图片与名称匹配样式-腰部 */
    .ssjk-center-part-title span {
        margin-top: 0.29rem;
    }
    /* 正力重点参数图片与名称匹配样式-底部 */
    .ssjk-bottom-part-title span {
        margin-top: 0.29rem;
        left: 0.39rem;
    }
​
    .font-title-icon {
        margin-left: 4.0rem; /* 328px / 80 */
        margin-top: 0.025rem; /* 2px / 80 */
        width: 1.25rem; /* 20px / 80 */
        height: 1.25rem; /* 20px / 80 */
        background: url(./image/monitorPlatform/Frame_11034.png) no-repeat;
        position: absolute;
        cursor: pointer;
        z-index: 1000;
    }
    .jksjbf1 {
        position: relative;
        width: 11.5125rem;
        height: 8.8rem; /* 716px / 80 */
        border-width: 0.025rem; /* 2px / 80 */
        border-style: solid;
        border-image-source: linear-gradient(180deg, rgba(162, 197, 255, 0) 0%, rgba(162, 197, 255, 0.24) 44.61%, rgba(162, 197, 255, 0.27) 100%);
        border-image-slice: 1;
        box-sizing: border-box;
        background: linear-gradient(180deg, rgba(16, 98, 222, 0.08) 0%, rgba(17, 96, 219, 0.07) 54.88%, rgba(19, 98, 215, 0.03) 75.82%, rgba(0, 95, 223, 0.02) 100%);
    }
    .jksjbf {
        top: 0.3rem; /* 24px / 80 */
        position: relative;
        width: 11.5125rem;
        height: 8.8rem; /* 716px / 80 */
        border-width: 0.025rem; /* 2px / 80 */
        border-style: solid;
        border-image-source: linear-gradient(180deg, rgba(162, 197, 255, 0) 0%, rgba(162, 197, 255, 0.24) 44.61%, rgba(162, 197, 255, 0.27) 100%);
        border-image-slice: 1;
        box-sizing: border-box;
        background: linear-gradient(180deg, rgba(16, 98, 222, 0.08) 0%, rgba(17, 96, 219, 0.07) 54.88%, rgba(19, 98, 215, 0.03) 75.82%, rgba(0, 95, 223, 0.02) 100%);
    }
}
/*媒体查询：2550*1440分辨率下的调整*/
@media screen and (min-device-width: 2550px) and (max-device-width: 2570px) {
    /*图示按钮*/
    .ssjk-center-part-title span {
        margin-top: 0.1rem; /* 15px / 80 */
        width: 1.3375rem; /* 107px / 80 */
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 17.36%, rgba(172, 221, 255, 1) 83.02%), rgba(209, 214, 223, 1);
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent;
        font-weight: 500;
        font-size: 0.1875rem; /* 15px / 80 */
        left: 0.305rem; /* 23px / 80 */
        position: absolute;
        text-transform: uppercase;
    }
​
}
​
/*媒体查询：1920*1200分辨率下的调整*/
@media screen  and (min-device-width: 1910px) and (max-device-width: 1930px)
and (min-device-height: 1190px) and (max-device-height: 1220px){
    /* 侧边菜单栏 */
    .suppplierMenu {
        position: relative;
        width: 2.6rem; /* 220px / 80 */
        height: 81.8%; /* 占满整个高度 */
        border: 0.0125rem solid rgba(83, 111, 169, 0.35);
        box-sizing: border-box;
        background: radial-gradient(235.18% 72.18% at 67.95% 7.5%, rgba(20, 106, 255, 0.24) 0%, rgba(21, 106, 255, 0.14) 22.78%, rgba(14, 113, 255, 0.07) 51.23%, rgba(20, 106, 255, 0) 100%), rgba(10, 30, 75, 0.2);
        background-size: cover;
        flex-shrink: 0;
    }
   
}
​
/*媒体查询：1920*1200之后放大150被之后，相当于：1920x1200 分辨率下，150% 的缩放会使视口宽度变为大约 1280px（1920 / 1.5 = 1280）*/
@media screen and (min-device-width: 1250px) and (max-device-width: 1290px) {
    .suppplierMenu {
        position: relative;
        width: 2.6rem; /* 220px / 80 */
        height: 87.8%; /* 占满整个高度 */
        border: 0.0125rem solid rgba(83, 111, 169, 0.35);
        box-sizing: border-box;
        background: radial-gradient(235.18% 72.18% at 67.95% 7.5%, rgba(20, 106, 255, 0.24) 0%, rgba(21, 106, 255, 0.14) 22.78%, rgba(14, 113, 255, 0.07) 51.23%, rgba(20, 106, 255, 0) 100%), rgba(10, 30, 75, 0.2);
        background-size: cover;
        flex-shrink: 0;
    } 
}