分析前端页面常见布局排版

首先我们先关注显示器 显示器的分辨率问题很大程度影响页面最后的渲染展示效果;

常见的显示器分辨率:

1024*600 (文物 大屁股显示器) 

1280*1024 (1% 用户 正方形显示器 即将灭绝)

1366*768(30% 用户 其中有20%的笔记本用户是从1920*1080的分辨率系统放大过来的)

1440*900 (25% 用户 其中有20%的笔记本用户是从1920*1080的分辨率系统放大过来的)

1680*1050 (4% 用户 这类显示器少)

1920*1080(40% 用户 其中有3%的用户是从4k分辨率系统放大过来的 )

2K (就是那种超长的显示器 )

4k (按1920*1080处理)

1.中间定宽式布局

优点: 无论在那种显示器下都不会乱 内容区域看着和谐
缺点: 左右两则会有空白 不能铺满 分辨率越大 空白区域越大

1920 分辨率下的

1366分辨率下

2.左侧定宽式布局

优点: 无论在那种显示器下都不会乱 内容区域看着和谐
缺点: 右则会有空白 不能铺满 分辨率越大 空白区域越大

1920 分辨率下的

1366 分辨率下的

3.流式布局

优点: 无论在那种显示器下都会铺面 
缺点: 内容区域看着可会不和谐 大屏时内容少时会被拉伸变形 小屏内容多会挤压变形

1920 分辨率下的

 1366分辨率下的