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

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

知识点

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

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

接上文

假如我在小一些的屏幕上进行查看，效果居然变成这样。😮😮😮 跟下面的效果图差别还是很大的

分析问题

boostrap中用flex进行响应式布局，但是这种绝对定位的效果好像是没办法用flex去实现响应式。于是去百度了一下大屏响应式方案。发现用 transform 对页面进行等比例缩放可以解决这个问题。

解决方法

具体的代码只是在想要缩放的div上加样式:

transform: scale(0.84375);

要进行比例的计算的，比例的计算是在js中完成

(function(){
    function l_resize(){
        var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
        let designWidth = 1920;
        let scale = windowWidth/designWidth;
        // document.querySelector('.liiy_rsz').style.transform = `scale(${scale})`;
        // $('.liiy_rsz').style.transform = `scale(${scale})`;
        document.querySelectorAll('.liiy_rsz').forEach(item=>{
            item.style.transform = `scale(${scale})`;
        })
    }
    window.onload = function(){ l_resize();}
    window.onresize = function(){l_resize();}
})();

`通过这种方案就解决了最基本的，异形的效果如果更换屏幕分辨率就会错位的问题`

问题深入

缩放需要设置个参考点，也就是 transform-origin属性。默认值是：50% 50% 0。但是，有一些更复杂的地方，首页的那个全屏上下滑动的插件也要进行缩放。那个插件默认就会占满整个屏幕，此时如果再执行我们写的上面的缩放的js代码，那首页很多地方会发生严重的错位、变形。达不到我们想要的那个结果。 此时，我们就需要对这个缩放的效果进行更深入的研究

未完待续~~