尺寸

在移动端页面，我用到的尺寸单位有em、rem、vw、px基本不用，但我会设置Dom根元素html字体大小为14px，一来方便em和rem的尺寸计算，二来14px是最常用的字体大小。

常规浏览器默认字体大小为16px，最小字体为12px。

em

首先你要有这样一个基础的认知：

假如一个元素没有重设字体大小，那么它的字体大小会继承父级元素，如果父级也没有设置大小，那么依次类推一直追溯到body、html。

em是相对于当前元素字体大小计算像素值的，计算方法是em值 * 字体大小。

举例：
一个元素设置了高度为2em，那么实际像素值为2 * 14px = 28px，而一旦这个元素重设了字体大小为2em，那么该元素高度值为2 * 28px = 56px。另外，其后的子元素的计算基数都会改变。

使用em时一旦有设置字体大小的样式出现就需要注意重新计算一些属性值大小了。

rem

与 em 相比，这货看起来多了一个字母，显然是属于升级版本。
rem是始终相对与 Dom 根元素html来计算像素值的。不管当前元素字体如何设置，计算时字体大小仍然以html的字体设置为基准。

vw

vw指的的当前屏幕宽度，与之对应的还有 vh，表示屏幕高度。如果屏幕宽为 360px，那么 100vw = 360px。

是否感觉并没有什么卵用？别着急，下面说一下我的一次适用经历。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html：

<div class="box">
    <div class="inner">
        <div class="cont cont-1"></div>
        <div class="cont cont-2"></div>
        <div class="cont cont-3"></div>
    </div>
<div>
css：

.box {
    width: 100%;
    overflow: hidden;
}
.inner {
    width: 300%;
}
.cont {
    float: left;
    width: 100%;
}

以上代码用以实现三屏的左右切换效果，外层容器.box和三个内容块宽度为屏幕宽度，三个内容块设置了左浮动样式。此时，内层容器.inner需要有3倍的屏幕宽度以承载三个内容块。
但是由于宽度继承的关系，在内层容器.inner宽度改变后，内容块的宽度计算基数也改变了。此时设置的100%是等于父级元素宽度的，也就是三倍屏宽。

使用js是很容易解决这个问题的，不过vw显然是可以适用这个场景的。
只需要如下设置便可解决问题。

.cont { width: 100vw; }
该属性在兼容性为android 4.4+，谨慎使用。

devicePixelRatio
在一个图表页中，我用canvas画了个饼图。发现在手机屏幕中区块颜色显得模糊。于是搜索资料就找到了这个属性，window.devicePixelRatio。
目前我对这个属性的理解还不深，基本的理解为：屏幕缩放比。传送门：张鑫旭：设备像素比devicePixelRatio简单介绍

我们通过写的css中像素仅为逻辑像素，就是你看到的宽度，而实际上手机屏幕单个点是可能存在多个像素的。

如果是常规页面元素是用不到这个属性的，而canvas的真实宽度和css宽度是不一致的。
计算方法为：canvas.width = canvas.style.width * devicePixelRatio。

需要注意：一旦重设了canvas的真实宽度，那么canvas之上的一切元素都需要乘以devicePixelRatio进行缩放。

布局

在PC上为了兼容可恶的IE不得不使用大量的浮动来进行块级元素的并行排行。而在移动端我们有了更好的选择，但不是inline-block，而是flex。

使用flex可以轻易的实现等宽、散列、垂直居中、多行排列、底部对齐等等各种布局。

定义一个flex容器

1
2
3
.flex-row {
    display: flex;
}

通过设置容器属性，可以呈现不同的排列对齐方式。

flex-wrap

定义容器换行方式，默认不换行。可设置换行和反向换行。

flex-direction

排列方向，默认子元素从左到右顺序排列。通过设置该值可以实现反向排列或垂直方向的上下排列。

justify-content

主轴（水平方向）对齐方式，默认左对齐。可以实现居中、右对齐、等宽间隔等排列。

align-items

侧轴（垂直）对齐方式。可实现垂直居中、底部对齐、基线对齐等。

align-content

多轴垂直对齐方式。

最后附上Demo：flex常用布局:https://imys.net/demo/flex.html

参考：

大漠：Flexbox——快速布局神器
阮一峰：Flex 布局教程：语法篇
阮一峰：Flex 布局教程：实例篇