【web架构设计】新型UI适配架构方案

用户可能使用pc和手机设备浏览网站,前后端怎么设计才能既满足性能最好又能适配。

答案就是:前端判断设备类型,然后动态获取所需要的css和js,并且在设备改变的时候也做出相应的变化

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据屏幕宽度动态加载合适的css</title>
</head>
<body>
<div>text</div>

<script>
    var head = document.getElementsByTagName('head')[0];

    const switchStyle = () => {
        let w = window.innerWidth;
        let url = '1.css';
        if(w < 600){
            url = '2.css';
        }
        var oldCSS = document.getElementsByTagName('link')[0];
        oldCSS && head.removeChild(oldCSS);

        var newCSS = document.createElement("link");
        newCSS.rel = "stylesheet";
        newCSS.href = url;
        head.appendChild(newCSS);
    }

</script>

<script>
    switchStyle();
    window.addEventListener('resize', switchStyle);
</script>
</body>
</html>

以上代码有个问题没有优化,它每次resize都会删除掉样式再添加样式,这样会影响性能,需要再优化一下

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页