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提供的一些预定义的标签来绘制图形,或者绘制文字。常用的内部标签如表所示。文章来源:https://www.uudwc.com/A/rZ6N0/
标签名 | 说明 |
---|---|
<rect> |
矩形标签 |
<circle> |
圆形标签 |
<ellipse> |
椭圆形标签 |
<line> |
线段标签 |
<polyline> |
折线标签 |
<polygon> |
多边形标签 |
<path> |
路径标签 |
<text> |
文字标签 |
<tspan> |
类似<span> ,用在<text> 内部单独设置样 |
SVG 常用的内部标签还可以通过属性来设置样式,常用的属性如表所示。文章来源地址https://www.uudwc.com/A/rZ6N0/
属性名 | 属性值 | 说明 |
---|---|---|
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 实现矢量图引入。