@media screen and (min-width:640px) {
/*屏幕大于640像素应用该样式*/
}
@media screen and (min-width:460px) and (max-width:640px) {
/*屏幕小于640大于460像素应用该样式*/
}
@media screen and (max-width:460px) {
/*屏幕小于460像素应用该样式*/
}
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)
}
@media screen and (device-aspect-ratio:1366/1024){body{
background: #000
}
}
width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色桢缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是网格的还是位图设备
貌似，@media是不能适应两个属性，只能是一个，
或者写成这样：
@media screen and (max-device-width: 1366px){@media screen and (max-device-height:1024px){
body{background:#00}
}
}
