适配总结

1、没有设置 viewport 的情况下，不同尺寸下的手机屏幕默认宽度都是980宽；

2、设置 viewport 为固定的 width；

　　<meta name="viewport" content="width=360">

　　设置 <meta name="viewport" content="width=360"> 后，会使页面在不同设备上显示相同宽度，事例中不管 iPhone 5 或 iPhone 6 页面都会变成 360px 宽；

3. 设置 viewport 为设备的 width

　　设置 <meta name="viewport" content="width=device-width"> 后，页面宽度会识别为硬件设备最优的宽度显示，这是使用最广泛的设置方式。

4、动态设置rem；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <script>
  (function(doc,win,wid){
    var rootEle = doc.documentElement,
        wid = wid || 750;
    recalc();
    function recalc(){
      rootEle.style.fontSize = 100*(rootEle.clientWidth/wid)+"px"
    }
    win.addEventListener('orientationchange',recalc,false);
    win.addEventListener('resize',recalc,false);
  })(document,window,750);</script>
  <style>
  *{margin: 0; padding: 0;}
  #full{background-color: red; font-size: 0;}
  .item{background-color: yellow; height: 2rem; width: 2rem; display: inline-block; margin: 0 3px 0 0; font-size: 14px;}
  </style>
</head>
<body>
  <div id="full">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

传入的 750 为设计图总宽度，在任何屏幕宽度内，1rem 等于设计图中的 100px；

5、flexible.js

　　引入

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 或者

<script src="./node_modules/amfe-flexible/index.js"></script>

flexible主要做的三件事情

动态改写<meta>标签
给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
给<html>元素添加font-size属性，并且动态改写font-size的值

// 首先是一个立即执行函数，执行时传入的参数是window和document
(function flexible (window, document) {
  var docEl = document.documentElement // 返回文档的root元素
  var dpr = window.devicePixelRatio || 1 
  // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值
 
  // 调整body标签的fontSize，fontSize = (12 * dpr) + 'px'
  // 设置默认字体大小，默认的字体大小继承自body
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    } else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10
  // 设置root元素的fontSize = 其clientWidth / 10 + ‘px’
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
 
  setRemUnit()
 
  // 当页面展示或重新设置大小的时候，触发重新
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
 
  // 检测0.5px的支持，支持则root元素的class中有hairlines
  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))

6.vw && vh

　　　　根据CSS3规范，视口单位主要包括以下4个：

　　　　1.vw：1vw等于视口宽度的1%。

　　　　2.vh：1vh等于视口高度的1%。

　　　　3.vmin：选取vw和vh中最小的那个。

　　　　4.vmax：选取vw和vh中最大的那个。

posted @ 2020-04-27 15:20 JaylenWu 阅读(202) 评论(0) 编辑收藏举报

JaylenWu

适配总结

公告