移动端适配

参考资料

• 早起适配解决方案：https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html（2015-11-19）
• 目前适配方案：https://www.w3cplus.com/css/vw-for-layout.html（2017-08-02）

视窗

跟viewport相关的单位

• vw：是Viewport’s width的简写,1vw等于window.innerWidth的1%
• vh：和vw类似，是Viewport’s height的简写，1vh等于window.innerHeihgt的1%
• vmin：vmin的值是当前vw和vh中较小的值
• vmax：vmax的值是当前vw和vh中较大的值

1
2
3
4
5
6
7
8
9
10
11
12

/**
 * 用sass实现适配思路
 * 假定设计稿尺寸为750*1334
 */

$vw_base: 750;
@function vw($px){
    @return ($px / $vw_base) * 100vw;
}
body{
    width: vw(750);
}