2020-07-29 adaptación de pantalla de forma especial html + css z-index + supervisión JS cambios de ancho y altura de dom + reducción de habilidades suaves para lograr el salto de página

2020-07-29 Fuente del tema: http://www.h-camel.com/index.html

[html] ¿Cómo se adapta la interfaz a varias pantallas de formas especiales al crear páginas?

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

[css] ¿Puede el índice z ser negativo?

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

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

[js] Escribe un método para monitorear los cambios en el ancho y alto del 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

[Habilidades blandas] ¿Cómo saltar dentro de la página del archivo de rebajas?

A continuación, haga clic en el nombre del directorio para saltar a la ubicación de destino en la ubicación de destino, como en el sitio con un nombre de dominio, más la identificación, como  <h2 id="yuMing">网站与域名</h2> debajo del nombre correspondiente del directorio, como el nombre de dominio más la identificación de la posición de destino, nombre de dominio y  luego haga clic en el nombre del directorio , Saltará al sitio web de la ubicación de destino y al nombre de dominio.

Haga clic en el final de la ubicación de destino, vuelva al directorio en el directorio y agregue la identificación, como ##  directorio  al final de la ubicación de destino, agregue la identificación del directorio, como volver al "contenido principal" . Haga clic en el final de la posición de destino y volverá al directorio.

Supongo que te gusta

Origin blog.csdn.net/vampire10086/article/details/108116976
Recomendado
Clasificación