响应式网站布局要适应的当下主流手机屏幕的各个版本的分辨率有哪些(media query)

响应式网站布局要适应的当下主流手机屏幕的各个版本的分辨率有哪些(media query)

阅读 7.2k
2 个回答

可以参考我之前做过的由screensiz.es得出的统计

CSS宽有13种:

320360375384400533600768800853102412801366

CSS高有15种:

36048053356856960064066772076880085396010241280

考虑到屏幕可能变为竖屏,那么综合一下共20种:

320360375384400480533568600640667720768800853853960102412801366

划分一下,大致是:

  • 第一档在小屏幕手机:320~384
  • 第二档在note/pad:400~900
  • 第三档在桌面端:960~

在实际项目中统计的结果表明,手机屏幕的宽度中的95%还在320~375宽。保证手机版画面主体内容在320宽内即可。

做响应式不用参考任何屏幕尺寸,只需关注于页面,在适当的地方打上断点就行

宣传栏