前端架构师之路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 常用的内部标签还可以通过属性来设置样式,常用的属性如表所示。文章来源地址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 实现矢量图引入。

原文地址:https://blog.csdn.net/zhangchen124/article/details/133196804

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年09月26日 13:44
visual studio的安装
下一篇 2023年09月26日 13:44