记录我第一次做切图仔和静态H5活动页

最近化了一个星期的时间做了一个小的活动H5的项目，内容是某个地方的美食地图和一些介绍文字和图片。

使用了vue框架来做，这个项目的难度不大，但是页面还挺多，数据要写成json来读取，所以用vue来做会快很多

作为一个有经验的前端hhhhh，这开发难度当然是不大，但是也很考验我的布局能力与css的熟悉度

下面是我的一些总结经验：

1.使用图片时，我们使用img还是设置div的background属性
在做这个项目的时候我对这个确实没啥概念，后来才发现了有的地方用img有的地方用background会比较方便
（1）
当我我们用复合图片做背景的时候（图片叠加图片）
想都不用想肯定选div的background，
因为background可以同时设置好几个背景叠加，还可以调整对应的参数，同时叠加多张切图对页面的自适应是有帮助的，而img做到这种效果可能比较麻烦。

.map {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: 
  url("../assets/img/H5首页/地图.png") no-repeat 50% 25%,
    url("../assets/img/H5首页/宣纸-效果.png") top,
    url("../assets/img/H5首页/山水背景_03.png") no-repeat center,
    url("../assets/img/H5首页/山水背景_01.jpg") no-repeat top,
    url("../assets/img/H5首页/山水背景_02.jpg") no-repeat bottom;
  background-size: 100%,100% 100%,100%, 100%, 100%;
  display: flex;
  flex-direction: column;
}

（2）
在引入图片的时候，想固定图片宽度为盒子的100%，然后让图片高度去撑开，这个时候，img就比较好用了，div的background并不做为div的内容，所以不会撑开高度，想做到img的效果需要一些繁琐的步骤，所以还是乖乖用img吧。
（3）
在使用img或者background的时候，我们需要关注一下图片的高度与宽度，这个比例要控制好，不然切的图会变形。我在做这个项目的时候用的是rem，像一些切图的按钮，我会设置background-size: 100%（宽度100%，高度等比放大），保持图片不变形

2.绝对定位position:absolute和相对定位position:relative
这个我一般很少用hhhh，因为我习惯用flex布局，写页面内的弹窗我才会用到绝对定位position:absolute，但是这个项目有地图上面加标签的需求，所以我又重温了一下这些内容。
relative 定位
相对定位元素的定位是相对其正常位置。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

相对的意思是相对于元素自己原来的位置
绝对的意思是在已定位的父元素里面，进行绝对定位

所以这个相对和绝对的参照物是不一样的

常常可以在相对定位position:relative的父元素里面对元素使用绝对定位position:absolute

3.图片压缩
通常来说手机H5的图片过大，导致加载过慢，解决方法有几个
（1）cdn加速
（2）写一个懒加载，改善用户体验
（3）压缩图片（对图片清晰度要求不是特别高可以用，通常手机图片展示大小不会特别大，所以低清晰度也足够）

这里放一个免费在线压缩图片的网站：https://tinypng.com/

4.字体包压缩
字体包的格式有很多
我们通常会用ttf
因为手机端是没有字体包的，和PC不一样，
而且苹果和安卓的默认字体还是不一样的
如果要修改特殊字体就必须要用字体包
但是一个完整的字体包可能会10几m
很影响加载速度
如果文字是固定的话，我们可以使用
fontmin工具去把里面用不上的文字给删除掉
或者使用npm工具 字蛛也可以
但是不知道具体会用到什么字的话，我们可以用FontCreator工具，手动把ttf包里面用不上的英文字符特殊字符给删除
也可以压缩字体包空间

4.浏览器兼容性
兼容性查询