持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
知识点
全竖屏滑动插件fullpage,响应式方案
这都是一些实际项目的开发经验，不是东拼西凑的网上水文。如果这篇文章帮到了你，麻烦动动你发财的小手给点个赞，留下个评论。🙏🙏🙏
接上文
fullpage插件是一个竖向实现全屏滚动的插件。配合设计出一些高大上的图，会给网站呈现出不一样的效果，可以让客户眼前一亮。
但是fullpage插件默认会完全填充当前屏幕。这对于上图的这种效果，可能就不是太好整了。
- 难点一：底部的导航部分，缩放原点如果按照 0,0 的位置为原点的话，被缩放时候，底部不会完全的贴合到屏幕最下方。这是设计所不允许出现的情况。
- 难点二：图片中的黄色区域部分是通过相对定位实现，而且定位的距离是写死的像素。白色部分亦是如此。这就导致了问题，屏幕一旦不是我们开发时候的像素，就需要缩放，但是fullpage插件的影响。会造成完全的错乱。
解决方法
出现这个问题时候，我们就需要去设置缩放原点的问题了。我们必须把缩放的原点放在最后。
所以这个底部 div的缩放原点要写成。
transform-origin: left bottom !important;
这样当屏幕不是1920的大小时候，进行缩放的时候，底部不会发生变化。
另外一个问题就是：每一个全屏通栏的异位变形的问题。