移动端

移动端开发

原生开发

ios、Android、RN、uniapp、Flutter

小程序开发

原生小程序、uniapp、Taro等

Web页面

移动端web页面，可以使用浏览器或者webview浏览

视口

• 浏览器中看到的区域就是视口
• fixed就是相对视口定位的
• PC端中布局视口与视觉视口是同一个

移动端视口

• 默认情况下移动端布局视口往往大于视觉视口

视口划分

• 布局视口：宽度980px,超过移动端的可视视口

• 视觉视口: 在PC端布局的时候布局的视口可能会超过移动端的可视视口，所以手机浏览器会将页面缩小以查看所有内容。

• 理想视口：我们希望的是设置100px，那么移动端显示的就是100px，而不是缩小之后的

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

适配方案

百分比

• 不同属性的百分比，参照物可能不统一，极少使用

rem单位+动态html的font-size

• 媒体查询

  • 需要根据不同屏幕写大量@media min-width
  • 无法实时更改大小

• js动态

  设计稿为640，设备为320时，画一个宽100px高200px的矩形

  使用rem: 设计稿设置font-size为100px，目的是取值方便转换，现在可以表示 宽1rem（100px）高2rem（200px）

  设备中需要设置font-size: 320/640 = x / 100, x表示设备中需要设置的font-size的值

  function setRemUnit(){
      const htmlEl = document.documentElement;
  	const htmlWidth = htmlEl.clientWidth;
      const unit = htmlWidth / 10;
      htmlEl.style.fontSize = unit + 'px'
  }
  setRemUnit()
  window.addEventListener('resize',setRemUnit)
  
  

• lib-flexible

  (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 () {
      var rem = docEl.clientWidth / 10
      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换算：postcss-pxtorem
  • vs code 插件：px to rem

vw单位

html{
    font-size:10vw; /*相当于37.5px,375设计稿*/
}

vw相比较rem的优势

• 不需要计算html的font-size大小，也不需要给html设置这样一个font-size;
• 不会因为设置html的font-size大小，而必须给body再设置一个font-size,防止继承
• 因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱
• vw相比较rem更具语义化，
• 可以具备rem之前的所有优点

换算

• postcss-px-to-viewport-8-plugin
• vs code 插件 px to vw

flex的弹性布局