响应式设计实例

苹果官网

  苹果官网导航  

苹果官网的响应式变化主要适应浏览器的视窗宽度，比如官网导航，就会随着浏览器视窗宽度变化而变化。官网导航主要分为两个档位：PC端和M端。

视窗宽度大于833px时，系统判断是PC端。
整个导航容器（PC端样式）最大宽度是1024px，即视窗宽度只要大于1024px，导航容器都保持1024px宽；但当视窗宽度小于1024px时，就开始压缩导航容器宽度，直到834px。

视窗宽度小于或等于833px，系统判断是M端。
此时收起导航中的Tab项，只留下最重要的操作和抽屉按钮。

  苹果官网页面栅格体系  

以Iphone13介绍页部分模块为例。首页说一下栅格体系的规则：通过行（Row）和列（Column）来定义信息区块的位置与尺寸，以保证页面的每个区域能够稳定灵活地排布起来。我们在实际工作中，重点会放在列（Column）上。列与列之间的间距叫Gutter。

设计师定义栅格需要注意4点：
1，清晰定义动态布局范围。（随着视窗宽度变化，哪些是固定值？哪些是变化值？一般Gutter是保持不变的，变化的是Column的宽度。）
2，尽量保持偶数思维。（指Column的数量，一般定义为12的居多）
3，关键数据的交付。（Column、Gutter）
4，区块的定义要从Column开始到Column结束。

苹果网页内容部分，响应式设计分为三个档位。

PC端样式：
视窗宽度大于1068px，设计容器尺寸是1440px宽。当视窗宽度大于等于1440尺寸时候，设计容器里内容不变；当视窗宽度小于1440（大于1068px），则压缩栅格Column宽度，页面则会显示图片等被左右裁切，但字号等元素大小和相对位置在此范围中不会发生变化。

Pad端样式：
当视窗小于等于1068px，且大于734px，设计容器尺寸是744px宽。在1068px的卡点时，设计容器就会变成744px宽，同时文字、图片等元素也会适应新的设计容器而相应变小。在1068至734px之间拉伸视窗，栅格的适配原理不变。

M端样式：

视窗宽度小于等于734px，设计容器宽度是434px。同样，页面内元素适应新容器宽度也做了相应的调整。

特斯拉官网

  特斯拉官网导航  

同样，特斯拉官网导航也分为三个档位，对应PC、Pad、M端不同设备。

PC端样式：
视窗宽度大于等于1200px。布局形式与苹果PC导航不同，是采用【左中右】形式，整体导航容器没有最大宽度值，而是实时适应浏览器视窗，拉伸或压缩左（Logo）、中（Tab）、右（重要操作按钮）三块内容之间的间距。而这三块内容里的元素、间距在视窗拉伸过程中保持不变。

Pad端样式：
当视窗小于1200px，且大于等于600px，导航变成Pad模式。收起所有操作，导航上只留logo（左）、导航栏展开按钮（右）。

M端样式：
视窗宽度小于600px，导航变成M端模式。同Pad端基本一致，只是屏幕两侧安全间距发生改变。

  特斯拉首页（大图形式）

这种大图模式的网页适配方案比较简单。特斯拉分为两档，PC和M端。

当视窗宽度大于等于600px时，系统判断是PC和Pad端。

背景图片：
背景图用PC版图片（一般设计提供尺寸1920*1080*2）。图片在视窗容器中或高度撑满宽度裁切左右或宽度撑满高度裁切上下。

内容结构：
页面标题按钮等内容元素在此范围内尺寸不作变化。浏览器视窗横向拉伸时，内容元素位置横向始终画面居中；浏览器视窗纵向拉伸时，可压缩调节区域会有相应变化，所以内容元素位置也会相应改变。

当视窗宽度小于600px时，系统判断是M端。

背景图片：
需另外提供M端尺寸（一般设计提供尺寸375*812*3）。图片在视窗容器中或高度撑满宽度裁切左右或宽度撑满高度裁切上下。

内容结构：
内容布局会适应M端屏幕作相应调整，标题字号相较PC端缩小一些，变成M端舒适的字号；按钮由左右并列结构变成上下结构，并且按钮宽度会随视窗宽度变化，与屏幕左右的安全距离保持不变。

  特斯拉购车页面（左右结构）

购车页面响应式设计分三个档位，PC、Pad和M端。

当视窗宽度大于1024px时，系统判断是PC端页面。此时页面是左右结构，右侧操作区域始终保持不变，左侧图片显示区域会适配视窗的变化。

当视窗宽度小于或等于1024px，大于或等于600px时，系统判断是Pad。布局模式变成纵向排列，除头部图片随视窗宽度变化，下面的内容容器在此范围内保持固定宽度。

当视窗宽度小于600px，系统判断是M端。与上一档布局形式保持一致，不同之处是屏幕左右两侧安全间距固定，内容容器则随视窗变化。并且里面的内容元素会适配M端屏幕重新调整（变小）。

  dribbble瀑布流  

dribbble的信息瀑布流动态布局，与上述内容不同。但也分为三个档位。

当视窗宽度大于等于1200px时，系统判断是PC端。此时内容距离视窗左右间距72px，这个是固定值。里面的内容则会适应屏幕而变化。当屏幕拉伸变化时，每列内容之间间距固定，每个单元格拉伸变化；每个单元格的最小宽度是290px，系统判断屏幕拉伸过程中如果单元格宽度将小于290px，就会自动减少一列。

当视窗宽度小于1200px，大于或等于768px，系统判断是Pad端。与PC不同点是视窗左右间距变成32px，其它适配规则不变。

当视窗宽度小于768px，系统判断是M端。视窗左右间距变成20px，其它适配规则不变。

总结

  响应式的布局形式：

目前响应式布局基本形式有三种：一是页面内容随视窗变化作缩放（比如苹果官网的栅格系统、特斯拉官网首页的PC端变化）；二是页面内容随视窗宽度变化作纵向转移（比如特斯拉购车页面）；三是页面内容随视窗变窄作内容的隐藏或删除（比如特斯拉和苹果官网的移动端导航）。

  响应式的卡点：

根据上面的案例分析，我们发现PC和Pad的卡点（Pad范围起始点）是1024px、1068px、1199px三个卡点；Pad和M端卡点（M范围起始点）是599px、734px、767px。基本上大部分响应式网页卡点都是在这两组区间范围左右。

另外还有一组设备数据可以分享给大家，是目前市场占有量较高的设备分辨率情况。
PC：
1920*1080（市场占有量：45.51%）
1536*864（市场占有量：9.82%）
1366*768（市场占有量：7.54%）
1440*900（市场占有量：6.63%）
1280*720（市场占有量：5.13%）
1600*900（市场占有量：4.69%）

Pad（一般就指苹果Pad）：
768*1024
1024*768

M：
360*640（市场占有量：41.89%）
414*736（市场占有量：21.67%）
375*667（市场占有量：18.25%）
320*568（市场占有量：2.83%）

以上数据是百度流量研究院2022年7月数据。https://tongji.baidu.com/research/site#os

我们案例中总结出的卡点基本覆盖了主流设备尺寸情况。我们在后期验收成果项目时，也需要重点走查下这些主流机型。

最后再和大家分享一个查看网页结构和观察响应式网页变化卡点的小方法。
使用谷歌浏览器，鼠标右键然后选择【检查】。进入开发者模式之后，我们可以看到google给我们模拟的各种设备时候的状态。然后在DevTools窗口中我们找到【元素】＞【布局】，就可以看到它的网格及网格叠加层。如果我们想去看网页的容器尺寸、字号大小等，可以到【样式】、【计算样式】中查看。

Powered by Froala Editor