移动端

移动端开发

原生开发

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的弹性布局

posted @ 2022-12-30 02:27  转角90  阅读(55)  评论(0)  编辑  收藏  举报