Résolution d'écran et compétences CSS

1. À l'heure actuelle, les données d'essai de l'adaptation des ordinateurs de bureau et des ordinateurs portables sont les suivantes:

Résolutions des ordinateurs de bureau et portables: 2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600

Résolution de la tablette: iPad (768x1024) iPad Pro (1024x1366) Nexus 10 (800x1280) Nexus 7 (600x960) - l'affichage est incomplet

Résolution du smartphone: Nexus 5 (360x598) Nexus 5x (412x684) iPhone 6 Plus (414x736) iPhone 6 (375x667) iPhone 5 (320x568) iPhone 4 (320x480) -l'affichage est incomplet

2. La barre de défilement apparaît soudainement pour empêcher l'instabilité de l'écran:

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

3. Modifiez (embellissez) le style de la barre de défilement:

//滚动条整体部分
::-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. Reconnaître automatiquement l'habillage du texte

* {
    white-space: pre-line;
}

5. Contrôlez le dépassement de texte:

.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. Revenez en haut:
const gotopBtn = document.getElementById ("gotop-btn");
openBtn.addEventListener ("click", () => document.body.scrollIntoView ({comportement: "smooth"}));

7. Mode sombre de la page:
html { filter: invert (1) hue-rotate (180deg); }

8. Mode de deuil de page (tout gris):
html { filtre: niveaux de gris (1); } 9. Justifiez le texte aux deux extrémités : text-align-last: justify

10. Désactivez l'effet :
événements de pointeur: aucun
11. Rapport hauteur / largeur maintient le rapport hauteur / largeur de l'image :
rapport hauteur / largeur: 1/1
12. Pince () Réalise la réactivité de la page :
Le principe de fonctionnement de la pince () est "clamping" Ou limiter une valeur flexible entre la plage minimum et maximum
img { width: clamp (15vw, 800%, 100%); } h1 { font-size: clamp (20px, 5vw, 35px); }