Resolución de pantalla y habilidades css

1. En la actualidad, los datos de prueba de la adaptación de la computadora de escritorio y la computadora portátil son los siguientes:

Resoluciones de escritorio y portátiles: 2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600

Resolución de la tableta: iPad (768x1024) iPad Pro (1024x1366) Nexus 10 (800x1280) Nexus 7 (600x960) - la pantalla está incompleta

Resolución del teléfono inteligente: Nexus 5 (360x598) Nexus 5x (412x684) iPhone 6 Plus (414x736) iPhone 6 (375x667) iPhone 5 (320x568) iPhone 4 (320x480) - la pantalla está incompleta

2. La barra de desplazamiento aparece de repente para prohibir la trepidación de la pantalla:

body {
    padding-right: calc(100vw - 100%);
}

3. Cambiar (embellecer) el estilo de la barra de desplazamiento:

//滚动条整体部分
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}
//滚动条轨道部分
::-webkit-scrollbar-track {
    background-color: transparent;
}
//滚动条滑块部分
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-image: linear-gradient(135deg, #09f, #3c9);
}

4. Reconocer automáticamente el ajuste de texto

* {
    white-space: pre-line;
}

5. Controlar el desbordamiento del texto:

.elem {
    width: 400px;
    line-height: 30px;
    font-size: 20px;
    &.sl-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &.ml-ellipsis {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

6. Vuelva a la parte superior:
const gotopBtn = document.getElementById ("gotop-btn");
openBtn.addEventListener ("click", () => document.body.scrollIntoView ({comportamiento: "suave"}));

7. Modo oscuro de página:
html { filtro: invertir (1) tono-rotar (180 grados); }

8. Modo de luto de la página (todo gris):
html { filtro: escala de grises (1); } 9. Justifique el texto en ambos extremos : text-align-last: justify

10. Desactive el efecto :
eventos de puntero: ninguno
11. La relación de aspecto mantiene la relación de aspecto de la imagen :
relación de aspecto: 1/1
12. Abrazadera () Se da cuenta de la capacidad de respuesta de la página :
El principio de funcionamiento de la abrazadera () es "sujetar" O limitar un valor flexible entre el rango mínimo y máximo
img { width: clamp (15vw, 800%, 100%); } h1 { font-size: clamp (20px, 5vw, 35px); }