移动适配和切图方案

三个问题

  • 高清屏
  • 宽高计算
  • 字体计算

先看个页面问题

先说下设备像素比

dpr:设备像素比

window.devicePixelRatio

<meta type="viewport">content

dpr:设备像素比

设备像素比

所以。。

640px的宽度在dpr=2的宽度在的屏上长度是320px

REM 是什么

em vs rem

  • 这是20px字体
  • 这是1em的字体
  • 这是1.5em的字体
    • 这是1.2em的字体
  • 这是20px字体
  • 这是1rem的字体
  • 这是1.5rem的字体
    • 这是1.2rem的字体

REM

document.documentElement

<HTML>的font-size

扫完盲,直接说结论

结论

  • 布局使用:rem
  • 字体使用百分比

设置html的font-size

用于rem基准值

var docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;
docEl.style.fontSize = rem + 'px';

页面head顶部引入flexible.js

设置body的font-size

用于页面字体基准值

[data-dpr="1"] body{
    font-size: $font-baseline;
}
[data-dpr="2"] body{
    font-size: $font-baseline * 2;
}
[data-dpr="2.5"] body{
    font-size: $font-baseline * 2.5;
}
[data-dpr="2.75"] body{
    font-size: $font-baseline * 2.75;
}
[data-dpr="3"] body{
    font-size: $font-baseline * 3;
}

页面宽高和字体怎么计算?

  • 根据设计稿宽度设置baseline
  • 根据标注原比例切图

bsass的两个mixin

@import 'bsass/base';
$rem-baseline: 64px;
$font-baseline: 12px;
.demo{
    @include rem(padding, 20px 30px);
    @include rem(height, 200px);
    //文字需要提前除以dpr
    @include fontsize(24px);
}
标注图

$rem-baseline 怎么定?

根据视觉稿宽度/10

$font-baseline 怎么定?

统一设置为12px!?

一定注意百分比会叠加的!

720的视觉稿怎么切?

  • 宽高是多少就写多少,等比例切图
  • 字体是多少就写多少,等比例切图

举个例子

720视觉稿中360x360的div

360px/2.25 = 160px

.demo{
    width: 160px;
    height: 160px;
}

举个例子

720视觉稿中360x360的div

@import 'bsass/base';
$rem-baseline: 72px;
.demo{
    @include rem(width, 360px);
    @include rem(height, 360px);
}

算一算

  • html字体:1rem=640px/10=64px
  • viewport:scale = 1/dpr = 0.5
  • css的宽:360px/72px = 5rem
  • 5rem*64px*0.5 = 160px