移動端適配

• 動態rem方案
  html的font-size 為 屏幕寬度 / 10
  記得給body寫一個font-size:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <script>
    let width = document.documentElement.clientWidth
    let scale = width / 320
    let css = `
      html {
        font-size: ${320 * scale / 10}px;
      }
     `
    document.write(`<style>${css}</style>`)
  </script>

• 1px border 方案
  1 獲取設備像素比 (不能設置content="width=device-width,否則強制像素比為1)
  2 initial scale = 1 / 像素比 (縮放整體)
  3 rem方案為 rem * 像素比 (元素擴大)
  4 使用1px

<script>
    let scale * 1 / window.devicePixeRatio
    document.write(`
      <meta name="viewport" content="${scale}, user-scalable=no, maximum-scale=${scale}, minimum-scale=${scale}">
    `)
</script>
<script>
  let width = document.documentElement.clientWidth / window.devicePixelRatio
  let css = `
    html {
      font-size: ${width * scale / 10 * window.devicePixelRatio}px;
    }
   `
  document.write(`<style>${css}</style>`)
</script>

scss函數

@function rem($px){
    $remSize: $px / 320 * 10;
    @return #{remSize}rem;
}
body {
    font-size: rem(16);
    margin: 0;
}

參考文章1
參考文章2
參考文章3
rem方案代碼參考

字體兼容

移動端

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

pc端(含Mac)項目：

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

移動和pc端項目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;