屏幕分辨率和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.滚动条回到顶部：

const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));

7.页面暗黑模式：

html{
	filter: invert(1) hue-rotate(180deg);
}

8.页面悼念(全灰)模式：

html{
	filter: grayscale(1);
}

9.两端文本对齐：

text-align-last:justify

10.禁用效果：

pointer-events:none

11.aspect-ratio维持图片长宽比：

aspect-ratio：1/1

12.clamp() 实现页面的响应式：

clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间

img {
  width: clamp(15vw, 800%, 100%);
}
h1 {
  font-size: clamp(20px, 5vw, 35px);
}