關於h5屏幕適配

1）使用rem進行等比縮放

rem作用於非根元素時，相對於根元素字體大小；rem作用於根元素字體大小時，相對於其出初始字體大小

比如根元素（html）設置font-size=12px; 非根元素設置width:2rem;則換成px表示就是24px；

如果根元素設置成font-size=1rem;則根元素換成px就是相對於初始字體大小，一般是12px；

原理分析：rem屏幕適配就是一種等比縮放效果

一般來說設計稿是基於p6（750），或者是p5（640）的尺寸，以p6為例子：

設置：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scale=no">

(function (doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) {
      return
    }
    if (clientWidth >= 750) {  // 避免無無限放大
      docEl.style.fontSize = '100px'
    } else {
      docEl.style.fontSize = 100*(clientWidth / 750) + 'px' // 設置根元素的font-size
    }
  }
  if (!doc.addEventListener) {
    return
  }
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

一般是配合scss 進行使用：

mixin.scss

@function px2rem($val) {
    @return #{$val*2/100}rem;
}

xxx.vue

@import '~/sass/mixin.scss';

.des-word {
  width: px2rem(30)
  height: px2rem(20);
  line-height: px2rem(20);
  text-align: left;
  color: #434c5f;
  letter-spacing: 0;
  word-break: break-all;
}　　　

存在的問題：對於文本段落來說，一般是不建議使用rem進行設置的，字體的大小和字體寬度，並不成線性關系，所以字體大小不能使用rem。

普遍的做法是使用媒體查詢，固定幾種字體大小【根元素是html ,如果一個元素設置為xrem那么他的大小是根據根元素字體大小進行變化的】

@media screen and (min-width: 320px) {
    body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    body {font-size: 18px}
}
@media screen and (min-width: 641px) {
    body {font-size: 20px}
}　　
div{
　　font-size:1.5em
}

字體大小是可以繼承的，這就是意味着，可以使用em ,進行字體大小設置。

em作為font-size的單位時，其代表父元素的字體大小，em作為其他屬性單位時，代表自身字體大小

比如父元素font-size:12px;

自身元素如果寫成：font-sise:2em;則自身元素用px表示就是24px（相對父元素字體大小）;

但是自身元素設置：width:2rem,那么自身元素用px表示就是48px（相對自身字體大小）；

2）使用vw進行適配布局

相對於視口的寬度。視口被均分為100單位的vw

如果屏幕寬度為200px，那么1vw=2px