1 移动端页面制作规范
1.1 计量单位的使用
CSS 的计量单位选择
- px：固定的像素值
- em：相对父级元素的 font-size 设置来作为当前元素 1em 所代表的像素值，如父节点的 font-size:10px，当前节点的 font-size:1.2em，则当前节点的 font-size 实为 12px
- rem：相对根节点 html 的 font-size 设置来作为当前元素 1rem 所代表的像素值，与 em 的区别就是 rem 的基本度量单位与父节点无关，只与根节点 font-size 的设置有关，如设置 html{font-size:10px;} 后当前 dom 所有节点的 1rem 都表示 10px
- vm/vh：表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh
移动端开发中我们使用 rem 作为基本计量单位，同时将根节点默认字号大小设为 font-size:62.5%，因移动端浏览器默认字号大小为 16px，16*62.5% 刚好为 10px
html {/* 相当于 10px */font-size: 62.5%;
}/* #example 的字体大小为 12px*/
#example {font-size: 1.2rem
}/* #example 子节点 div 的字体大小为 14px;宽度为 100px;高度 100px */
#example div {font-size: 1.4rem;width: 10rem;height: 10rem
}
- 安卓下
<textarea>标签的内容字体大小不支持 rem 设置
1.2 移动端开发细节和优化
在移动端使用新的 CSS3 样式代替原来在 PC 上的开发习惯
- 在宽度为100%的布局中，实现横向并排元素宽度的自动伸缩以及水平垂直居中平均分布、首尾分布排列等考虑使用 flex 布局
- 垂直居中使用 flex 实现垂直居中
- 尽量使用 border-radius，box-shadow，text-shadow 等 CSS3 样式实现诸如圆角、渐变色、盒子投影、字体投影等，减少使用图片
- 对于单色的 icon 图标，利用 字体图标 导入，这样的话，可以像修改字体一样随意地修改图标的颜色、大小、背景色、特殊效果（如投影）等，而不再需要每一种颜色就需要切一份图片
- 利用 transform:rotate(90deg) 来获取旋转了不同角度的 icon，避免每个角度需要切一张图片
- 在动画中，利用 CSS3 动画属性如 transform:translate(x,y) 来改变元素的偏移位置，减少使用 left 和 top 来做位移动画
2 图片模糊处理
理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。
对于高清屏而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以导致图片看起来比较模糊。
对于图片模糊问题，比较好的方案就是用多倍图片(@2x)。
如：一个 200×300(CSS pixel)的 img 标签，对于 dpr=2 的屏幕，用 400×600 的图片，如此一来，位图像素点个数就是原来的4 倍，在高清屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了。
2.1 多倍图
多倍图的作用是为了使图片在移动端中正常清晰的显示。
叫多倍图的原因就是不同的移动设备屏幕分辨率不同。比如说：二倍图、三倍图、四倍图等，这些就是多倍图。这里介绍一下二倍图，其他的多倍图都是同样的原理。
2.1.1 二倍图
直接使用普通图片和使用二倍图呈现的图片的清晰度区别。直接使用原图片直接丢到移动端页面的，可以很明显的看出图片的边缘有锯齿状。
进行压缩通过二倍图方式显示的图片，相比之下则清晰了很多。这就是多倍图的效果。
二倍图实质就是使用原先位置大小二倍的图片进行填充，在进行放大后仍以正常清晰度显示。
2.2 SVG 矢量图
网页中的图片大部分都是基于像素处理的，当放大时会失真，变得模糊。
可缩放矢量图形（Scalable Vector Graphics，SVG）是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）的，SVG 矢量图形是可伸缩的，可在任何的分辨率下被高质量地打印，可在图像质量不下降的情况下被放大。
2.2.1 SVG 标签和样式
SVG使用标签的方式定义各种图形，外层标签是 <svg>，viewBox可以定义用来观察SVG视图的一个矩形区域，它的属性主要包括x、y、width、height，用数字表示，每个数字之间用空格或逗号隔开，表示定义一个在左上角(x, y)坐标位置，宽度为width，高度为height的矩形。常用属性如表所示。
| 属性 | 说明 |
|---|---|
| width | 用来控制 SVG 视图的宽度 |
| height | 用来控制 SVG 视图的高度 |
| viewBox | 定义用户视野的位置及大小 |
在 <svg> 标签的内部，可以使用SVG提供的一些预定义的标签来绘制图形，或者绘制文字。常用的内部标签如表所示。
| 标签名 | 说明 |
|---|---|
<rect> | 矩形标签 |
<circle> | 圆形标签 |
<ellipse> | 椭圆形标签 |
<line> | 线段标签 |
<polyline> | 折线标签 |
<polygon> | 多边形标签 |
<path> | 路径标签 |
<text> | 文字标签 |
<tspan> | 类似<span>，用在<text>内部单独设置样 |
SVG 常用的内部标签还可以通过属性来设置样式，常用的属性如表所示。
| 属性名 | 属性值 | 说明 |
|---|---|---|
| fill | String | 定义填充颜色以及文字颜色 |
| fill-opacity | 0~1之间的浮点数 | 定义填充颜色的透明度 |
| stroke | String | 定义描边的颜色 |
| stroke-width | 大于0的浮点数 | 定义描边的宽度 |
| stroke-opacity | 0~1之间的浮点数 | 定义描边的颜色的透明度 |
| opacity | 0~1之间的浮点数 | 定义整个图形元素的透明度 |
| transform | translate(x, y) | 平移 |
| transform | scale(x, y) | 缩放 |
| transform | rotate(angle, [cx, cy]) | 旋转 |
| transform | skewX(angel) skewY(angel) | 倾斜 |
<!-- 定义一个圆形 -->
<svg width="100%" height="100%"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd"/>
</svg>
<!-- 定义一个外部svg -->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd" />
</svg>
3 练习作业
- 使用多倍图解决移动端图片模糊问题。
- 使用 SVG 实现矢量图引入。
