屏幕适配-自适应/响应方案总结

flexible

媒体查询(PC + 移动自适应)

media queries :主要通过查询不同的宽度来执行不同的css代码，最终以达到界面的配置。
核心语法：
@media screen and(max-width:600px){
    /**
        */
    html{
     font-size:32px;
    }
}

• media query 可以做到设备像素比的判断，方法简单，成本较低，特别是对于PC端和移动端维护同一套代码的时候；Bootstrap框架就是使用这种方式布局；
• 调整屏幕宽度的时候，不需要刷新页面即可响应；
• 图片便于修改，只需要修改CSS文件；

  优点：

  可同时去适配PC + 移动端

  缺点：

  成本过高，less库需要写至少两套

  flex + rem

flexible.js较为成熟

搭配vscode，将其基础设置修改为80px

// 设计稿1920px * 1080
// 1rem = 1920/24 = 80px
(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 / 24
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    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);

flexible升级版

使用

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

(function flexible (window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1 // 显示设备的物理像素分辨率与CSS像素分辨率
    // 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 / 24
    function setRemUnit () {
      // 最小400px，最大2560px
      let width = docEl.clientWidth 
      if (width/dpr <400) {
        width = 400 * dpr
      } else if (width/dpr > 2560) {
        width = 2560 * dpr
      }
      var rem = width / 24 // 1920下,1rem=80px
      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))

监听窗口，设置比例，自动缩放（vw）

如果说我们要一个不需要JS和CSS耦合在一起的单位，那vw/vh就是一个不错的选择。

视口是什么？ 浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

vw：view width，指视口宽度的百分比，如：1vw = 视口宽度的1%
vh：view height，指视口高度的百分比，如：1vh = 视口高度的1%
vmin：vmin的值是当前vw和vh中较小的值
vmax：vmax的值是当前vw和vh中较大的值

点击查看【juejin】

clamp新属性

可参考文章： https://juejin.im/post/6892766734995226631

clamp(minimum, preferred, maximum);

img {
  width: clamp(15vw, 800%, 100%);
}
h1 {
  font-size: clamp(20px, 5vw, 35px);
}
p {
  font-size: clamp(10px, 4vw, 20px);
}