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

移动端适配

• 动态rem方案
  html的font-size 为 屏幕宽度 / 10
  记得给body写一个font-size:

• 1px border 方案
  1 获取设备像素比 (不能设置content="width=device-width,否则强制像素比为1)
  2 initial scale = 1 / 像素比 (缩放整体)
  3 rem方案为 rem * 像素比 (元素扩大)
  4 使用1px

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;