web前端知识总结（随时更新）

一. 兼容性问题

1. 设备兼容

(1) 不同设备屏幕宽度(即分辨率问题)兼容

方法一：在js文件的head标签内写入如下代码

    <script>
        if(window.screen.width < 1200){
            document.write('<link rel="stylesheet" href="">')
        } else if(1200 < window.screen.width < 1600){
            document.write('<link rel="stylesheet" href="">')
        } else if(window.screen.width > 1600){
            document.write('<link rel="stylesheet" href="">')
        }
    </script>

根据匹配不同的屏幕宽度去引入不同的外部样式表，之所以强调要写在head标签内是有原因的，是因为这样写可以在加载页面内容前加载对应的css样式；

方法二：媒体查询

如果在 js 中去处理(和方法一类似)如下：

    <script>
        // 分辨率低于1280
        <link rel="stylesheet" media="screen and (max-device-width:1280px)" href=""/>
        // 分辨率高于1400
        <link rel="stylesheet" media="screen and (min-device-width:1440px)" href="" />
    </script>

如果在 css 中去处理如下：

<style media="screen">
    /*分辨率低于1280，采用下面的样式*/
    @media screen and (max-device-width:1280px){
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    }
    
    /*分辨率高于1440，采用下面的样式*/
    @media screen and (min-device-width: 1440px){
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    }
</style>

二. 一些奇葩的要求解决

1. 页面禁止所有点击事件

document.documentElement.addEventListener("click", (e) => {
    e.stopPropagation()
}, {
    capture: true
});