画面の解像度とCSSスキル

1.現在、デスクトップコンピュータとノートブックの適応のテストデータは次のとおりです。

デスクトップとラップトップの解像度：2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600

タブレットの解像度：iPad（768x1024）iPad Pro（1024x1366）Nexus 10（800x1280）Nexus 7（600x960）-ディスプレイが不完全です

スマートフォンの解像度：Nexus 5（360x598）Nexus 5x（412x684）iPhone 6 Plus（414x736）iPhone 6（375x667）iPhone 5（320x568）iPhone 4（320x480）-ディスプレイが不完全です

2.スクロールバーが突然表示され、画面のジッターが禁止されます。

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

3.スクロールバーのスタイルを変更（美化）します。

//滚动条整体部分
::-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.テキストの折り返しを自動的に認識します

* {
    white-space: pre-line;
}

5.制御テキストのオーバーフロー：

.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.上にスクロールして戻り
ます。constgotopBtn= document.getElementById（ "gotop-btn"）;
openBtn.addEventListener（ "click"、（）=> document.body.scrollIntoView（{behavior： "smooth"}））;

7.ページダークモード：
html { フィルター：invert（1）hue-rotate（180deg）; }

8.ページ喪（すべて灰色）モード：
html { フィルター：grayscale（1）; } 9.両端のテキストを揃える：text-align-last：justify

10.効果を無効にします：
pointer-events：none
11. Aspect-ratioは画像のアスペクト比を維持します：
aspect-ratio：1/1
12. Clamp（）ページの応答性を実現します：
clamp（）の動作原理is "clamping"または、柔軟な値を最小範囲と最大範囲の間に制限します
img { width：clamp（15vw、800％、100％）; } h1 { font-size：clamp（20px、5vw、35px）; }

おすすめ