Screens屏幕宽度断点
定义终端屏幕宽度的断点设计，包括手机，平板，笔记本电脑，桌面电脑，超清屏幕等的断点值。
前言
本框架在多终端自适应方面采用mobile-first原则，也就是将界面从小到大设计，默认按手机端的界面要求进行设计，通过@media查询扩展其他终端适应。
设备边界
移动设备和桌面设备的主要区别是，移动设备需要触控模糊操作，点击区域需要变大，并且会频繁使用拖拽和长按行为；而桌面端使用鼠标精确操作，通过右键显示更多菜单，没有长按行为。
如果需要通过断点区分设备边界，可先了解临界设备的分辨率：
| 设备名称 | 分辨率 | 设备类型 |
|---|---|---|
| iPhone 15 (390px) | 393 × 852px | 手机 |
| Galaxy Tab S9 FE | 600 × 960px | 三星平板 |
| iPad mini | 768 × 1024px | 苹果小型平板 |
| iPad air | 820 × 1180px | 苹果中型平板 |
| iPad pro | 1024 × 1366px | 苹果专业平板 |
| Samsung A9+ | 800 × 1280px | 三星平板 |
| Acer Aspire 3 | 1920 x 1080px | 普通笔记本电脑 |
手机竖屏宽度通常不会超过600px，而平板的竖屏宽度通常会大于600px，所以600px应该是手机和平板设备的边界值。
当前主流的笔记本电脑屏幕宽度基本上不小于1920px，如果按缩放120%使用，是1536px；平板设备竖屏和竖屏不会超过1536px。
桌面屏幕缩放
对于高清屏幕，如果分辨率过高，其中的文本会显得特别小，此时用户通常会使用缩放功能，将屏幕放大，以显示更大的文本。
| 设备名称 | 原始分辨率 | 缩放分辨率1 | 缩放分辨率2 |
|---|---|---|---|
| MacBook Air M1 | 2560 × 1600 | 2048 x 1280 | 2880 x 1800 |
| MacBook Air M2 | 2560 × 1664 | 2048 x 1280 | 2960 x 1890 |
| MacBook Pro 14" | 3024 x 1964 | 2560 x 1600 | 3456 x 2234 |
| MacBook Pro 16" | 3456 x 2234 | 3072 x 1920 | 3840 x 2400 |
| Acer Aspire 3 (Laptop) | 1920 x 1080px | 1536 × 864 (125%) | 不缩放 |
| Philips 221V8LB (screen 22") | 1920x1080 | 不缩放 | 不缩放 |
| AOC G4 (screen 27") | 2560x1440 | 2048 × 1152 (125%) | 1706× 960 (150%) |
| Samsung UJ59 (screen 32") | 3840x2160 | 3072 × 1728 (125%) | 2560× 1440 (150%) |
对于常规宽1920px的桌面显示器，是不需要缩放的；而用户近距离办公的4k屏通常需要做缩放处理。
边界
我们需要区分手机，平板和桌面设备的边界，因为这三类设备的显示方式有所不同。
我们可以初步以600px作为手机和平板的边界，并将900px作为普通平板和高清平板的边界。
这里存在一个问题，即如果手机是高清横屏显示，那么极有可能跨过600这个边界。所以需要在大于600px设备中追加一个条件，即小于900px的横屏显示。
/*小于599px，被视为手机端*/
@media (max-width: 599px) {
.demo{}
}
/*大于等于600px，小于899px，并且是横屏，被视为手机端*/
@media (min-width: 600px) and (max-width: 899px) and (orientation: landscape) {
.demo{}
}
/*大于等于600px，小于899px，并且是竖屏，被视为普通平板端*/
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
.demo{}
}
平板设备宽度有3个种类，分别是普通平板，高清平板和大屏平板。
/*大于等于600px，普通平板*/
@media (min-width: 600px) {
.demo{}
}
/*大于等于900px，高清平板*/
@media (min-width: 900px) {
.demo{}
}
/*大于等于1200px，超清平板*/
@media (min-width: 1200px) {
.demo{}
}
目前的桌面设备，不管是笔记本电脑还是桌面显示器，其真实分辨率都达到宽1920px，而当笔记本电脑分辨率使用1920px时，其内容会显得较小而不好辨认，通常会使用缩放功能将屏幕放大，以显示更大的文本，缩放比例通常是125%，1920px/1.25=1536px，所以1536应该是移动设备和桌面设备的边界。
不过不排除用户会使用一些老旧的笔记本电脑或桌面显示器（早期的笔记本电脑分辨率1360px或1440px），所以可以考虑增加一个普通桌面显示器的区间。
/*大于等于1536px，是桌面设备*/
@media (min-width:1536px) {
.demo{}
}
//1200~1535px且可使用hover表示老式桌面设备
@media (min-width:1200px) and (max-width:1535px) and (hover:hover) {
.demo{}
}
对于桌面设备，目前大概再分3中屏幕，一类是普通宽1920px的办公屏幕，二类是2k屏幕（宽达到2560px），三类是4k屏幕（宽达到3840px）。
所以我们自然对桌面屏增加两种查询条件。
/*大于等于2500px，是2k桌面设备*/
@media (min-width:2500px) {
.demo{}
}
/*大于等于3800px，是4k桌面设备*/
@media (min-width:3800px) {
.demo{}
}
总结
600px、900px、1200px、1536px、2500px、3800px是设备的关键边界，以他们断点可以清晰的区分小屏和大屏设备。
| 断点名 | 断点区间 | 设备类型 | 代表设备 |
|---|---|---|---|
| xxs | 0~599px | 手机，小型工控屏 | iPhone 15 (390px) |
| xs | 600~899px | 普通平板竖， 低分辨率手机横屏 | iPad Mini竖屏 (600px) |
| sm | 900~1199px | 普通平板横屏，高分辨率手机横屏，高清平板竖屏 | iPad pro |
| md | 1200~1535px | 高清平板横屏 | Samsung A9+ |
| lg | 1536~2499px | 普通办公屏（1920px），普通笔记本电脑（缩放125%=>1536px），其他被缩放的高清屏 | Philips 221V8LB |
| xl | 2500~3799px | 2k办公屏（2560px），被缩放的4k屏（150%） | AOC G4 |
| xxl | ≥3800px | 4k办公屏（3840px） | Samsung UJ59 |
实践
手机设备字号默认16px，进入平板设备断点，字号会适当增大1.2~1.4倍（19~22px）；进入桌面设备断点，字号将恢复变小（14~16px）。
我们可以通过以上总结实践这个结论。
/*小于599px，一律视为手机小屏*/
@media (max-width: 599px) {
.demo{
font-size: 16px;
}
}
/*小于899px，并且是横屏，被视为手机屏幕*/
@media (max-width: 899px) and (orientation: landscape) {
.demo{
font-size: 16px;
}
}
/*大于等于600px，小于899px，并且是竖屏，被视为普通平板端*/
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
.demo{
font-size: 22px;
}
}
/*大于等于900px，被视为高清平板*/
@media (min-width: 900px) {
.demo{
font-size: 24px;
}
}
/*大于等于1200px，被视为超清平板*/
@media (min-width: 1200px) {
.demo{
font-size: 24px;
}
}
/*大于等于1536px，普通桌面屏*/
@media (min-width: 1536px) {
.demo{
font-size: 14px;
}
}
/*大于等于2500px，是2k桌面设备*/
@media (min-width:2500px) {
.demo{
font-size: 14px;
}
}
/*大于等于3800px，是4k桌面设备*/
@media (min-width:3800px) {
.demo{
font-size: 14px;
}
}
