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

Question

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

Answer 1

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

CSS宽有13种：

320、360、375、384、400、533、600、768、800、853、1024、1280、1366

CSS高有15种：

360、480、533、568、569、600、640、667、720、768、800、853、960、1024、1280

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

320、360、375、384、400、480、533、568、600、640、667、720、768、800、853、853、960、1024、1280、1366

划分一下，大致是：

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

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

Answer 2

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