这篇文章主要介绍了Android屏幕宽度与自适应页面的内容有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Android屏幕宽度与自适应页面的内容有哪些文章都会有所收获,下面我们一起来看看吧。
为了让页面在所有的设备上都能友好的浏览,需要针对屏幕不同宽度对页面布局进行调整。屏幕宽度各有不同,不可能对所有屏幕宽度都进行处理。这里探讨主流设备宽度和以及合理的分类方式。
通常会大体上分为手机、平板、桌面设备。
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作为最大宽度会好一些。
关于“Android屏幕宽度与自适应页面的内容有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Android屏幕宽度与自适应页面的内容有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。