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

最新推荐文章于 2024-03-27 18:37:53 发布

Rand Tsui

最新推荐文章于 2024-03-27 18:37:53 发布

阅读量178

点赞数

分类专栏： web全栈

本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意

本文链接：https://blog.csdn.net/for_cxc/article/details/113854253

版权

web全栈专栏收录该内容

12 篇文章 1 订阅

订阅专栏

用户可能使用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都会删除掉样式再添加样式，这样会影响性能，需要再优化一下