前端架构师之路03_移动端规范兼容处理

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 实现矢量图引入。