响应式布局：

    1. 如果进行响应式开发需要加入以下代码   
    2.  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    viewport 视口（layout viewport 布局视口），设定页面渲染中的一些规则
    content(规则内容):
    width=device-width:让页面渲染的宽度和设备宽度保持一致
    initial-scale=1.0 :初始缩放比例1:1
    maximum-scale=1.0: 最大缩放比例1:1 (适配一些低版本安卓，如果不加user-scalable禁止会失效)
    minimum-scale=1.0: 最小缩放比例1:1 (适配一些低版本安卓，如果不加user-scalable禁止会失效)
    user-scalable=no:是否可对页面进行缩放，no 禁止缩放

    1、@media:
    css中设定条件就是基于@media完成的（类似if）

    • 媒体设备all/打印机设备（print）/ 屏幕设备（screen<电脑、手机、ipad等>）
    • 媒体条件 符合某个条件，写对应的样式
    • -max-width 最大宽度为
    • -min-width 最小宽度为
    • -width
    • 横屏/竖屏
      1. @media screen and (max-width: 500px){
      2.           /* 如果当前页面宽度<=500 */
      3.           /* .person {
      4.               width: 200px;
      5.           } */
      6.       }

    2、rem响应式布局（等比缩放）
    1920px的设计稿：100px=1rem,font-size设置成100px；
    750px的设计稿 ： 1rem = 100px；
    设置屏幕超过2560及以上，就固定1rem = 200px；
    宽度小于600以下，固定1rem=32px；

    第三方库适配（一般是px）：使用px2rem-loader插件将第三方UI库的px转成rem单位

    • 拿到设计稿后(现在移动端设计稿一般都是750px的)，我们设定一个初始的REM和PX的换算比例(一般设置为1rem=100px，为了方便后期换算)
    • 测量出设计稿元素的尺寸(PS测出来的是PX单位)，在编写样式的时候全部 转换为REM的单位(除以100即可) =>100%还原设计稿，最外层一般按照100%设置
    • 编写一段JS，获取当前设备的宽度，让其除以设计稿的宽度(设计稿是750PX或者1920PX)，在乘以初始的换算比例100，计算出当前设备下，一个rem应该=多少像素(只要改变HTML的font-size就可以)；这样HTML字体大小一改，之前所有以REM单位的元素都会跟着自动缩放..

      现在真实项目中，主体响应式布局以REM为主，部分效果实现可以基于flex来做，需要样式微调整还是要基于@media来完成的…

    1. <style>
    2. html {
    3.          font-size: 100px;
    4.      }
    5. </style>
    6. <script>
    7.     function computedREM() {
    8.         let HTML = document.documentElement;
    9.         winW = HTML.clientWidth || document.body.clientWidth;;
    10.         HTML.style.fontSize = winW / 1920 * 100 + 'px';
    11.     }
    12.     // 进入时执行computedREM
    13.     computedREM();
    14.     // 当浏览器窗口大小发生改变的时候执行computedREM
    15.     window.addEventListener('resize',computedREM);
    16. </script>

    3、

    • DPR适配：屏幕像素密度比，@2x @3x
      通过在F12进入网页调试模式，可以看到iphoneX 的DPR为3.0
      pc端和移动端适配方案 - 图1
      image.png

      iphone6/7/8 的DPR维2.0
      pc端和移动端适配方案 - 图2
      image.png

      如果图片的真实大小是20_20的话，那在DPR为2.0的手机上 会按照40_40来渲染
      如果图片的真实大小是20_20的话，那在DPR为3.0的手机上 会按照60_60来渲染
      这样一来图片就因为被放大而渲染”模糊”，所以需要设计师提供对应的40_40(@2x) 60_60(@3x)的图片。
      原生app开发或者H5移动端开发中，理论上应该按照多张素材准备:
      logo.png,
      logo@2x.png,
      logo@3x.png
      样式布局(CSS中)基于@media指定不同DPR下用不同的素材图；在或者在JS中，监听DPR值，让其加载不同的素材图；这样的好处是，在DPR为1.0的时候，加载小图，速度会更快
      真实开发中:
      只准备最大的，不管DPR多少,都加载最大的，DPR1.0也不会失真，只是多加载一些图片资源，速度慢一些，所以需要做图片懒加载，BASE64、雪碧图

    移动端设计稿一般都是750px的，所切的图就是@2x 的，在一些DPR为3.0的手机上使用@2x图片大多数也会显示的很清晰，这样就是为什么设计稿要750px的