基于Html+vue的响应式某工作室网页设计

小鱼儿 2024-04-06 12:15 55阅读 0赞

目录  
一、概览 2  
二、响应式设计 6

1.  最基础的 viewport 7
2.  移除所有背景视频，改用 canvas 动画 7
3.  页面由横宽到竖长带来的版式调整 9
4.  网页页脚部分的改变 12  
    三、浏览器兼容 16
5.  iOS 版 Safari 滑动不顺畅问题的解决 17
6.  移动版 Chrome 的地址栏颜色 17
7.  Safari 的网页图标定义 20
8.  Safari 主屏幕入口优化 23
9.  IE11 和 Edge 上的处理 25  
    四、视频部分 26  
    4.1 视频的动态加载 26  
    4.2 视频的加载进度条 28  
    五、Lottie 动画部分 30  
    六、Canvas 动画部分 35  
    七、自定义字体与拆分字体 38  
    八、其他效果与彩蛋 40  
    九、Webpack 与各 loader 配置 45  
    9.1 打包 js 文件 48  
    9.2 将 ES6 以上的语法转译为 ES5 51  
    9.3 打包 HTML 文件（一） 54  
    9.4 打包 CSS 文件 57  
    9.5 优化 JS 和 CSS 文件 62  
    9.6 打包图片和其他资源文件 64  
    9.7 打包 HTML 文件（二） 70  
    9.8 其他配置 72  
    十、开发环境配置与拆分 75  
    10.1 配置拆分 75  
    10.2 开发服务器配置 79  
    10.3 模块热替换配置 81  
    十一、模块懒加载 84  
    十二、其他减少请求数和压缩资源大小的方法 90

一、概览  
我们先整体地看一下成品页面。首先，在 PC 端第一屏是一个全景视频做背景（工作室作品《It’s Time》的节选），Logo 和主菜单放在上方左右侧。  
向下拉进入第二屏时，全景视频逐渐变暗，Logo 和主菜单部分变黑并形成一个 Header。第二屏是“作品”部分，最左边的作品通过 svg 动画（lottie-web 库）自动预览，右上方的作品当鼠标移入就使用视频模式预览。  
下面是“关于我们”部分，有一段中规中矩的文字展示，鼠标移入合影会触发 CSS 强调动画。  
最后是“联系”部分。背景仍为第一屏的视频，但是叠加了一层铁丝网一样的效果，画面也更加黯淡。前景左部是 Logo 和联系方式，右部是简易留言板。鼠标移到“向我们留言”按钮时会有一个 hover 效果。  
二、响应式设计  
众所周知，只用考虑 PC 端，并且只考虑 Chrome 浏览器的前端项目是幸福的。然而幸福往往非常珍贵，因为我们往往要考虑所有主流环境，特别是做一个有宣传作用的官网。如今随着各种智能设备的发展，面对如此千差万别的屏幕分辨率，为每种设备专门做一套网页的做法早已不符合时代的需要。本文转载自http://www.biyezuopin.vip/onews.asp?id=14966这时，催生了响应式网页设计（Responsive Web Design）的概念。  
响应式网页设计的理念是：Web 页面应当根据用户的行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行对应的调整。  
换句话说，页面应该有能力去自动响应用户的设备环境。  
在技术上，响应式网页设计通常采用 CSS 媒体查询、JavaScript 的屏幕分辨率监测、CSS 的流动布局及百分比布局、弹性图片、以及 css3 新增的弹性盒子布局（Flexible Box Layout）和网格布局（Grid Layout）来实现。目前也有许多前端框架和组件库可以做到这一点，从最老派的 Bootstrap 到最新潮的 Ant Design 都有响应式支持。  
在效果上，我希望当用户在 PC 上慢慢调整浏览器宽度时，页面可以流畅地改变布局。以“关于我们”为例，有针对 PC 宽屏、PC普通屏、平板、手机四种宽度下的四种布局：

/* eslint-disable no-unused-vars, no-undef */
    
    import './styles/public.css';
    import './styles/layout.css';
    import './styles/remodal.css';
    import './styles/remodal-theme.css';
    import './styles/font.css';
    import './styles/index.css';
    
    import frame from './frame';
    import vm_header from './vm_header';
    import vm_footer from './vm_footer';
    import vm_article from './vm_article';
    import vm_remodal from './vm_remodal';
    import about_us_resize from './about_us_resize';
    
    var resizeHooks = [];
    
    function resize(first) {
        
        resizeHook($(window).width() + frame.getScrollbarWidth(), $(window).height(), first);
        setTimeout(function() {
        
            resizeHook($(window).width() + frame.getScrollbarWidth(), $(window).height(), first);
        }, 500);
    
        function resizeHook(ww, wh, first) {
        
            resizeHooks.forEach(function(e) {
        
                e(ww, wh, first);
            });
        }
    }
    
    function updateScrollTop() {
        
        vm_header.scrollTop = $(window).scrollTop();
    }
    
    resizeHooks.push(function(ww, wh) {
        
        vm_header.ww = ww;
        vm_header.wh = wh;
        vm_header.screen_wh = window.screen.availHeight;
    
        vm_footer.ww = ww;
    });
    
    resizeHooks.push(function(ww, wh) {
        
        vm_article.ww = ww;
        vm_article.wh = wh;
        vm_article.inner_ww = $(window).width();
    
        //调整“作品”布局
        var $a1 = $('#artworks .artwork-1');
        var bigHeight = $a1.width();
        var normalHeight = bigHeight / 2;
        $a1.css('height', bigHeight + 'px');
        var $a2 = $('#artworks .artwork-2');
        $a2.css('height', normalHeight + 'px');
        var $a3 = $('#artworks .artwork-3');
        $a3.css('height', normalHeight + 'px');
        var $a4 = $('#artworks .artwork-4');
        $a4.css('height', normalHeight + 'px');
    
        //调整“关于我们”布局
        about_us_resize(ww);
    
        //调整“团队”照片宽高
        var $member = $('#team .member');
        var member_width = $member.width();
        $member.css('height', member_width + 'px');
        $('#team .member img').css('width', member_width + 'px');
    
        //调整“团队”成员介绍字体的大小
        var $member_detail = $('#team .detail p');
        var text_font_size = Math.min((member_width - 60) / 16, frame.root_font_size);
        $member_detail.css({
        
            fontSize:text_font_size + 'px',
            lineHeight:text_font_size * 1.6 + 'px'
        });
    
        //调整“团队”成员姓名字体的大小
        var name_font_size = Math.min(member_width / 3 / 3, frame.root_font_size * 2);
        $('#team .detail h2').css({
        
            fontSize:name_font_size + 'px'
        });
        $('#team .detail .line').css({
        
            width:name_font_size + 'px',
            height:name_font_size + 'px',
            top:name_font_size/2 + 'px'
        });
    
        //调整“联系”布局
        var $contact_left_content = $('#contact .left .content');
        $contact_left_content.css({
        'top': ($contact_left_content.parent().height() - $contact_left_content.height()) / 2});
    });
    
    $(function() {
        
        frame.paintedEggshell();
    
        resize(true);
        $(window).resize(function() {
        
            resize(false);
        });
    
        updateScrollTop();
        $(window).scroll(function() {
        
            updateScrollTop();
        });
        $(window).load(function() {
        
            updateScrollTop();
        });
    
        $('img').attr({
        
            'ondragstart': 'return false;',
            'border': 0
        });
    });
    
    $(function() {
        
        $(window).scroll(function() {
        
            vm_article.scrollTop = $(this).scrollTop();
        });
        //播放视频
        if (frame.canPlayVideo() && !device.mobile()) {
        
            window.addEventListener('load', function () {
        
                const bg_video = document.getElementById('bg-video');
                const artwork_2_video = document.getElementById('artwork-2-video');
                bg_video.muted = true;  // Chrome的autoplay政策在2018年4月做了更改，只有muted autoplay始终被允许
                bg_video.addEventListener('canplay', () => bg_video.play());
                bg_video.load();
                artwork_2_video.muted = true;
                artwork_2_video.addEventListener('canplay', () => artwork_2_video.play());
                artwork_2_video.load();
            }, false);  // 知识点：useCapture=false：如果将useCapture设置为true，则侦听器只在事件流的捕获阶段处理事件，而不在目标或冒泡阶段处理事件。如果useCapture为false，则侦听器只在目标或冒泡阶段处理事件
        }
        //GOPRO字体动画（懒加载）
        if (frame.canPlayBodymovin()) {
        
            import(/* webpackChunkName: "lottie_animate" */ './lottie_animate')
                .then(lottie_animate => {
        
                    lottie_animate.default();
                });
        } else if (frame.canPlayVideo() && !device.mobile()) {
        
            window.addEventListener('load', function () {
        
                const artwork_1_video = document.getElementById('artwork-1-video');
                artwork_1_video.muted = true;
                artwork_1_video.load();
                setInterval(()=>{
        
                    try {
        
                        artwork_1_video.play().catch(err => {
        });
                    } catch(err) {
        /**/}
                }, 2000);
            }, false);
        }
        //移动端canvas聚光灯动画（懒加载）
        if (device.mobile() && frame.canPlayCanvas()) {
        
            import(/* webpackChunkName: "scrawl_canvas_animate" */ './scrawl_canvas_animate')
                .then(scrawl_canvas_animate => {
        
                    const sca = scrawl_canvas_animate.default;
                    sca.init();
                    sca.draw(vm_article.ww, vm_article.wh);
                    var old_ww = vm_article.ww, old_wh = vm_article.wh;
                    resizeHooks.push(function(ww, wh) {
        
                        if (ww != old_ww || wh != old_wh) {
        
                            sca.draw(ww, wh);
                            old_ww = ww;
                            old_wh = wh;
                        }
                    });
                });
        }
    });

![在这里插入图片描述][f4e44158dbeb438b9a741ec3b453ebfd.png_pic_center]  
![在这里插入图片描述][8f9f76a7f9a6419aac65f7d1f4daf713.png_pic_center]  
![在这里插入图片描述][d4e5836588e4497a8182c234aa095d0f.png_pic_center]  
![在这里插入图片描述][e95a8770295b4de6a5123cec1a2d5788.png_pic_center]  
![在这里插入图片描述][8edca46802104f2bbd2b5486b99330f9.png_pic_center]  
![在这里插入图片描述][6ce0afae48574f208944fa89a5816f15.png_pic_center]  
![在这里插入图片描述][4e85cd0ed21f428587da9f37493262b8.png_pic_center]  
![在这里插入图片描述][dc1d6194d68d44a9ae32c189a29e207b.png_pic_center]  
![在这里插入图片描述][40546048799c4712a1bbe6f936a3ef3b.png_pic_center]  
![在这里插入图片描述][ae09c836bcc946f2abf8c9a0fc885a4d.png_pic_center]  
![在这里插入图片描述][6db0cd3d338a403db5c2b9f926c25b02.png_pic_center]  
![在这里插入图片描述][4ea83a9fd219450194bed045d30d68d7.png_pic_center]  
![在这里插入图片描述][08adaddabffd42d99d59a214ac313b3d.png_pic_center]  
![在这里插入图片描述][2fe26d60b36b46f7929a89431675b7a1.png_pic_center]  
![在这里插入图片描述][6f92c5cc36044daf8b68668f6df577d2.png_pic_center]  
![在这里插入图片描述][be6fca0b486f4d07ae501294f042c628.png_pic_center]  
![在这里插入图片描述][4a3abf04ee194f9ea08ad08b6fdbe33f.png_pic_center]  
![在这里插入图片描述][727314aaee9245d5a44be218c0440d6f.gif_pic_center]  
![在这里插入图片描述][c93c3c16cbab4305a4c53642db4ba01a.png_pic_center]  
![在这里插入图片描述][08ce48c1566a4d2da5b56697196535be.png_pic_center]  
![在这里插入图片描述][d5b610c3368944d5b8bf2f68d501afb6.png_pic_center]

[f4e44158dbeb438b9a741ec3b453ebfd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/01613528fa7e4450a334a41dd5b105c4.png
[8f9f76a7f9a6419aac65f7d1f4daf713.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/594b2672c76b4c359a6df72603cd7613.png
[d4e5836588e4497a8182c234aa095d0f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/100b11ec08d748ce94d899d06e9043ed.png
[e95a8770295b4de6a5123cec1a2d5788.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8e3db8322e714e8f95d54faca677cd2d.png
[8edca46802104f2bbd2b5486b99330f9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3a8a631612444102883a2a2396a6645b.png
[6ce0afae48574f208944fa89a5816f15.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fd25b54c93cb4657b1feacdc8284ad7a.png
[4e85cd0ed21f428587da9f37493262b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/89610d75be0341f5a4ee3734069ca00a.png
[dc1d6194d68d44a9ae32c189a29e207b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/54bcf8f14d6e46128d28ab649f57ccb2.png
[40546048799c4712a1bbe6f936a3ef3b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/40aaf76b6dde4de9926d45c3e83c55ea.png
[ae09c836bcc946f2abf8c9a0fc885a4d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5992cb331dc5493fbceec0582b9fc331.png
[6db0cd3d338a403db5c2b9f926c25b02.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/271602d51bd5421db5f0bdf5fcecd4b8.png
[4ea83a9fd219450194bed045d30d68d7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9d38965544454fab97d8f70b6dac5c33.png
[08adaddabffd42d99d59a214ac313b3d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6005b843fd754fa6a1c655c61ab0c4b5.png
[2fe26d60b36b46f7929a89431675b7a1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ad17b903fdf34629b7738b2c51ef240a.png
[6f92c5cc36044daf8b68668f6df577d2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6c0828ab6e194ddebb01357272e5f377.png
[be6fca0b486f4d07ae501294f042c628.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/50d345f96f524ede81d3d655a1c3ec8d.png
[4a3abf04ee194f9ea08ad08b6fdbe33f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f232494c71f14c5aa3a280d6d98772be.png
[727314aaee9245d5a44be218c0440d6f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e5954803b3d547eda1e911035159d1f1.gif
[c93c3c16cbab4305a4c53642db4ba01a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f04154ab10fa4ea39b03b30c43b35ec7.png
[08ce48c1566a4d2da5b56697196535be.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0014e443c6714a0a9403fad7ca5ed5e2.png
[d5b610c3368944d5b8bf2f68d501afb6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0a27a1491ae14595adcd7bac20c95917.png