屏幕宽度与自适应页面

为了让页面在所有的设备上都能友好的浏览，需要针对屏幕不同宽度对页面布局进行调整。屏幕宽度各有不同，不可能对所有屏幕宽度都进行处理。这里探讨主流设备宽度和以及合理的分类方式。

通常会大体上分为手机、平板、桌面设备。

手机

iPhone 5	iPhone 8	iPhone 8 Plus	iPhone 12 min	iPhone 12 Pro	iPhone 12 Pro Max
`320*568`	`375*667`	`414*736`	`360*780`	`390*844`	`428*926`

此处是逻辑分辨率，不是物理分辨率

虽然手机有越做越大的趋势，但受限于手掌宽度，不可能无限扩大。目前最大的iPhone不过428px，就算未来还有加大的可能，最大应该不会超过500px。

iPad mini 第五代 (7.9英寸)	iPad 第八代 (10.2英寸)	iPad Air 第四代 (10.9英寸)	iPad Pro 第二代 (11英寸)	iPad Pro 第四代 (12.9英寸)
`1024*768`	`1080*810`	`1180*820`	`1194*834`	`1366*1024`

最小的iPad竖屏是768px，这也是分割手机和平板的交界点。最大的平板则可以当笔记本电脑使用了。

MacBook Air (13 英寸)	MacBook Air 2017 (13 英寸)	MacBook Air (16 英寸)	Windows 笔记本 (13英寸)	Windows 笔记本 (14英寸)
`1280*800`（放大2.0倍）	`1440*900`	`1536*960`（放大2.0倍）	`1280*720`（放大1.5倍）	`1366*768`

笔记本范围基本在1280至1536之间。1280是分割笔记本电脑和ipad的交界点。为了便携，笔记本电脑的屏幕会固定在13-14英寸之间。16英寸可以看作是笔记本电脑的极限了。

虽然台式电脑的显示器看起有更大的扩展空间，但考虑到桌面大小，以及人眼的视线范围，桌面显示器会以23.8英寸和27英寸的1920*1080为主流。27英寸的2K显示器字太小，32英寸的2K显示器则太大了。即使是台式电脑，1920px的宽度也已经是极限了。

由于台式机的用户越来越少，且过宽的屏幕需要转头才能浏览，体验并不好。所以对更大的屏幕进行优化是否值得，是一个值得商榷的问题。

xs	sm	md	lg	xl	xxl
`<576px`	`≥576px`	`≥768px`	`≥992px`	`≥1200px`	`≥1400px`

xxl的1400px对应的是MacBook Air 2017 1440*900分辨率显示器。看起来太小了一点，但也许Bootstrap认为更宽的屏幕已经没有意义，用户量少且体验不佳。毕竟需要转头才能浏览的宽屏，是没有必要专门去适配的。

默认	sm	md	lg	xl	2xl
`<640px`	`≥640px`	`≥768px`	`≥1024px`	`≥1280px`	`≥1536px`

2xl的1536px与MacBook Pro 16 英寸的1536*960一致。在MacBook不再生产1440*900分辨率，台式显示器也少有这个分辨率的情况下，1536也许会是一个更明智的选择，即照顾到了台式显示器，也兼顾了MacBook Pro 16英寸笔记本。

xs	sm	md	lg	xl
`<768px`	`≥768px`	`≥992px`	`≥1200px`	`≥1920px`

768px 是 iPad mini 的最小宽度，以此点作为手机和平板的分界线是合理的。不管是更小的576px或者是640px，其实意义都不大，基本不会对这个尺寸再进行适配。

但以1920px作为最大的宽度，则没有使用1536px好。

xs	sm	md	lg	xl	xxl
`<576px`	`≥576px`	`≥768px`	`≥992px`	`≥1200px`	`≥1600px`

使用1600px作为最大的宽度，显然是针对台式电脑的。考虑到苹果的1536px屏幕，应该使用1536px作为最大宽度会好一些。

大部分情况下，只需考虑手机 平板 桌面三种情况，无需为超过1280px的屏幕做适配：

甚至只考虑手机和桌面两种情况：