发表于： 2019-11-08 22:56:49
1 1053
今天完成的事情：今天主要改了以前任务bug
明天计划的事情：继续后面的任务
遇到的问题：在自适应方面消耗了非常长的时间。雪碧图自适应方面花了很长时间
收获：基本改完了以前的bug，例如任务七中的
这几个小图标我是用雪碧图做的，要实现自适应比较困难，屏幕放大之后图片不会拉伸，后来查到雪碧图可以用百分比的方式取图实现自适应，基本原理就是先将背景图按比例扩大，在进行截取，以我的图为例高度不变，横向扩大4倍，代码
然后坐标也要改成百分比的形式，基本公式可以理解为
background-position:50% 50%;图片水平和垂直居中。与 background-position:center center;效果等同。
等同于x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。
实际代码
现在效果图
可以看出在两种不同的大小下实现了雪碧图的自适应，其他就是一些小bug了。例如使用vw单位来实现自适应，代码
实现了水民这一块的自适应，效果同上，明天继续后续任务
返回列表
评论