记录一次PC 大屏 响应式问题的解决过程(1)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

知识点

全竖屏滑动插件fullpage,响应式方案

这都是一些实际项目的开发经验，不是东拼西凑的网上水文。如果这篇文章帮到了你，麻烦动动你发财的小手给点个赞，留下个评论。🙏🙏🙏

效果

知识点一：全屏的fullpage上下滑动的插件的使用

知识点二：相对定位的一些元素，在页面的发生缩放的时候不会错乱。依然是按照原比例进行显示。

课程背景

一个搞设计的朋友说接了个网站开发的工作，把psd文件扔给我，让我写代码。

我一看图就告诉他搞不了，这些异位的效果虽然好看，但是响应式里面想让它保持效果不变比较难搞喔

他直接来了句，反正活就给你了，你看着整。好吧，只能是迎着头皮整了。

开始

主要的html

<div class="zx1 w-100">
    <div class="zx11">
        <img class="w-100 h-100" src="__MY__/image/car1.png" alt="">
    </div>
    <div class="zx12">
        <h2>{:_lang('3-1-title')}</h2>
        <p>{:_lang('3-1-content')}</p>
    </div>
</div>

主要的样式

.zx1{
    margin-top:82px;
    padding:0 82px;
    position: relative;
}
.zx11{
    width: 883px;
    height: 522px;
}
.zx12{
    width: 984px;
    height:370px;
    box-shadow: 0px 7px 7px 1px rgba(14, 5, 10, 0.1);
    position: absolute;
    top:70px;
    right:95px;
    background-color: #fff;
    padding:65px 106px 0 131px;
}
.zx12 h2{
    font-size: 41px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #BFA252;
    margin-bottom:0;
}
.zx12 p{
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4D4D4D;
    margin-top:55px;
    text-align: justify;
}

通过对 .zx12进行相对定位，实现了图片中的那个异位的效果。大体看上去没啥问题，完全按照设计稿1920*1380进行编写的。但是假如此时我使用的电脑不是这么大小，是小一些的屏幕，那么问题来了。

未完待续~~