目前主流的浏览器分辨率为：1280px、1366px、1440px、1680px、1920px。那么我们设计的网站该如何完美、高质量的适配不同分辨率屏幕呢？

一、适配总原则

1. 页面主要适配1280px ~ 1920px之间的屏幕。

2. 小分辨率下，内容显示完整。

3. 大分辨率下不出现大量空白。

4. 屏幕低于1280px的视觉问题，优先级低。界面采用横向滚动条显示

5. 屏幕大于1280px，则内容宽度随浏览器宽度动态变化。其中顶部导航自适应宽度100%铺满。

二、页面布局

基本结构有三种设计方式：

1. 顶部-侧边布局-通栏

2. 顶部-侧边布局-居中

3. 侧边布局

1、顶部-侧边布局-通栏

1）适用场景：

页面中包含横向较宽的组件，比如列数较多的表格列表页面。

2）常见的适配规则：

左侧菜单固定，右侧内容区铺满，宽度随屏幕分辨率动态缩放。

2560px ≥ 屏幕分辨率 ≥ 1920px

a. 侧导航固定为208px，内容页面宽度固定为1664px（屏幕1920-侧导航208-左右间距48）

b. 随着横向分辨率的增大，页面左右的间距变宽。

c. 顶部导航宽度随分辨率增大而自适应铺满屏幕。

1920px ≥ 屏幕分辨率 ≥ 1280px

a. 内容宽度随着横向分辨率变化而增减，比如：

1680px分辨率下的页面宽度为1424px

1280px分辨率下的卡片宽度为1024px。

1280px ≥ 屏幕分辨率 

内容宽度保留1024px不变，界面通过显示横向水平滚动条查看。

2、顶部-侧边布局-居中

1）适用场景：

页面的组件单一，横向占用空间较少。

2）常见的适配规则：

左侧菜单固定，右侧内容区居中，宽度固定为1024，随着横向分辨率增大，左右两边间距变宽。

2560px ≥ 屏幕分辨率 ≥ 1280px

a. 侧导航固定为208px，内容页面宽度固定为1024px。

b. 随着横向分辨率的增大减少，页面左右的间距变宽变小。

c. 顶部导航宽度随分辨率增大而自适应铺满屏幕。

1280px ≥ 屏幕分辨率 

内容宽度同样保留1024px不变，界面通过显示横向水平滚动条查看。

3、侧边布局

侧边两列式布局。页面横向空间有限时，侧边导航可收起。

侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。

优点：内容根据浏览器终端进行自适应，能提高横向空间的使用率。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。

缺点：整个页面排版不稳定。这类导航横向页面内容的空间会被牺牲一部分。

三、24 栅格系统

为了符合偶数的思路，同时能够适配多数主流的显示设备，因此网格基数设置为4。

1、栅格规则：

采用24栅格体系，对内容区域进行24等分。

2、规则如下：

内容宽度=屏幕尺寸-左侧导航（208px）-2*offset（边距24px）=24*Column+23*Gutter

栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔(n 是自然数)。Column值则根据浏览器分辨率随着变化。

如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。

如果需要垂直间距，可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。

3、下面为1680px的示意图及常规布局（间隔为24px）

其中：内容宽度为1424px=屏幕尺寸1680-左侧导航208p-2*offset（边距24px）=24*Column(栅格38px)+23*Gutter(间隔24px)

4、根据目前设备的不同分辨率，将主流浏览器分辨率分为：

lg:1760～1920（1920）

md:1600~1759(1690)

sm:1440~1599(1440)

xs:1280~1439(1280、1366)

即适配规则：

当1920分辨率的每行4个卡片（每个卡片占6个栅格）

在1680分辨率的每行4个卡片（每个卡片占6个栅格）

在1440分辨率的每行3个卡片（每个卡片占8个栅格）

在1366和1280分辨率的每行2个卡片（每个卡片占12个栅格）

*注意：卡片的每行的布局数量规则需要根据业务需求以及卡片内部元素布局而灵活调整。

5、卡片内部元素的排版规则

元素宽度：自动拉伸。

多元素布局：多个元素一行排版放不下时，则上下布局。

文本长度：

a. 高度变化：内容保持显示完整，如标题，导航。

b. 等高截取：超出截断用...省略，鼠标Hover时显示tip提示，显示全文，如描述文字等非关键文本。

责任编辑：亚星管理平台菁思福科技

版权所有：https://www.uzncsrj.com (亚星管理平台菁思福科技) 转载请注明出处