移动端方面记录(持续更新)

移动端适配

• 动态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;