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.自动识别文本换行
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)
}
这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。
我们只需要在我们的HTML页面的<head></head>标签中，使用js，根据不同的电脑分辨率，加载不同的css样式表。注意这里的js一定要写在<head></head>标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来。
媒体查询是CSS3的新特性，绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率，应用不同的css样式。
这个思路和和方法一差不多，或者说方法一的思路和这个思路差不多，毕竟这也是官方的做法。我们有两种使用媒体查询的方式。
1.根据不同的分辨率，引入不同的css样式表
这个方法和方法一相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。
2.在同一个css样式表中，根据不同的分辨率，写不同的css样式
这个方法只有一个css演示表，在这个样式表里面，根据不同的分辨率，写不同的css样式。
一些大型的门户网站，他们的基本布局都是固定宽度，只要在最小的宽度满足1024宽度即可。所以很多大型门户网站两边都是会留有空白的，这样就可以用以下样式：{
margin : 0 auto/*表示居中显示*/
width : 1000px/*小于1024的固定宽度*/
}
不过楼主可以尝试一下百分比
推荐楼主去看一本书：《CSS彻底设计与研究》
