2020-07-29 html的异形屏适应 + css的z-index + JS的监听dom宽高变化 + 软技能的markdown实现页面跳转

2020-07-29 题目来源：http://www.h-camel.com/index.html

[html] 制作页面时，前端如何适应各种异形屏？

沉浸式体验与异形屏适配 https://blog.csdn.net/u012165769/article/details/106843367/

[css] z-index可以是负数吗

z-index 指定一个元素的堆叠顺序，该元素需要设置定位 position: absolute|relative|fixed;

z-index 可以是负数，意义在于置于较高堆叠顺序元素的后面。

[js] 写一个方法监听DOM宽高的变化

监听DOM大小的变化，可以有2个方式：
1. 一般考虑，当窗口发生变化的时候，获取dom的样式
缺点： 通过js去控制的dom宽高变化，但是window没有发生resize，所以不会监听到变化。

window.onresize = function() {
    const width = getStyle(dom, 'width');
    const height = getStyle(dom, 'height');
}
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

2. 使用 setInterval的方式监听dom的变化
缺点： 实际项目中不可能使用这个。

let timer = 0；
timer = setInterval(() => {
    const style = {
            width: getStyle(dom, 'width'),
            height: getStyle(dom, 'height'),
    };
}, 200)

3. 自己开发模块
参考文章 https://blog.csdn.net/mapbar_front/article/details/83190372
该项目的github地址：https://github.com/liwudi/wd-domsize-monitor.git

[软技能] markdown文件如何实现页面内跳转？

点击目录下名称，跳转到目标位置 在目标位置，如网站与域名处，加上id，如 <h2 id="yuMing">网站与域名</h2> 在目录下的相应的名称下，如域名后加上目标位置的id，域名 则点击目录的域名，会跳到目标位置网站与域名。

点击目标位置结尾，回到目录 在目录处，加上id ，如## 目录 在目标位置结尾，加上目录的id，比如回到“主要内容”。 则点击目标位置结尾，就会跳回到目录。