响应式设计中的断点
总结: 断点决定了网页何时调整到不同的布局。它们帮助设计师（和开发者）在多种屏幕尺寸、方向和设备上保持布局的一致性。
网格、布局与响应式设计
网格和布局是响应式网页设计的基本组成部分。在响应式设计中，设计会根据设备特性和屏幕大小进行调整和响应。
网格提供了一种有效的组织方式，方便在网页和移动端设计中高效地创建布局。一个网格由列、间距和边距组成，为页面上元素的布局提供结构。
布局指的是页面上不同内容和UI元素在屏幕上的位置。布局允许设计师利用屏幕或设备上可用的空间，使设计和内容对用户来说更有意义。
网格提供了结构，使得我们可以将布局设计在这些结构上。除了网格之外，断点也是响应式设计的基础组成部分。
什么是断点？
断点（breakpoints）是构建响应式设计的重要组成部分。它允许设计师调整布局，以适应不同屏幕大小和设备的需求。
断点定义了设计应该在特定屏幕尺寸转换为不同的布局。
从技术上讲，一个断点是一个具体的屏幕尺寸。当窗口大小达到该特定值时（例如，因为用户调整了浏览器窗口大小），布局将会改变。
然而，在实践中，设计师往往使用“断点”这个词来指特定布局将会显示的屏幕大小范围（最小和最大宽度），因为他们需要在媒体查询（media query）中对该数值进行指定。例如，一个桌面端断点可能从1200像素到1400像素 —— 这意味着任何宽度在该范围内的屏幕都将显示桌面布局。
刷新 
随着ritual.com网站的大小调整，它会经历两个不同的断点。因此，布局从4列变为2列布局。
拥有更多的断点意味着您的设计将能够更加细致和优雅地适应不同的屏幕尺寸变化。然而，在实际情况中，当设计资源有限时，拥有许多对应于众多屏幕尺寸的布局可能并不可行。在实践中，设计师通常只适配2-3个断点。
四个常见的断点
通常，设计师会考虑为四个基本断点进行设计。我们使用T恤尺码（小、中、大）来命名，因为每个尺寸没有具体的标准。如前所述，每个断点通常包含一个可自定义的最小和最大宽度，以适应设计的布局需求。（若要确定这些断点的确切值，应首先分析您的受众在访问您的网站时使用的设备范围，然后建立断点，以便最佳地适应最常见的显示尺寸。）
超小型：这个范围通常是针对手机的，通常最大为500像素（如果考虑到设备在横向方向显示的情况下）。在这个断点尺寸通常使用4列网格。
小型：该范围考虑到平板设备，从500像素一直到1200像素。在这种平板尺寸下通常使用8列网格。
中型：这个范围是为笔记本电脑设备设计的，通常从1200像素到1400像素。在这个尺寸下通常使用12列网格。
大型：此范围考虑到大型外接显示器的尺寸，1400像素及以上。在这个尺寸下通常继续使用12列网格。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
在设计时需要考虑的基本断点尺寸包括超小、小、中和大。
布局变化
在断点尺寸之间切换时通常会发生以下布局变化：
不同的导航：例如，在从中型断点过渡到小型或超小型断点时，左侧导航可能会折叠到汉堡包菜单图标之下。
列的折叠：如果存在右侧列，它可能会折叠到主内容区域，或在其他地方呈现。
可见内容量的不同：由于布局列的增加或减少，每个特定行中的元素（卡片、文件、产品等）会增多或减少。
断点使用示例
示例1：从网页到移动端
Warby Parker是一个眼镜品牌，其响应式网站使用列式网格创建了吸引人的视觉体验。
在中等屏幕尺寸，3个大小一致的列构成了网格结构，所有元素与这些列对齐，并位于其中。在移动端（小屏幕尺寸），Warby Parker的3列网格重新流动为一列网格结构。
在小屏幕尺寸的断点处，Warby Parker的三列网格（上图）被重新改变成一列网格结构（下图）。
示例2：从桌面端到笔记本
在IBM的网站上，左侧导航在对应大屏幕尺寸的布局中默认可见，但在中等屏幕尺寸下，它被折叠到顶部栏的汉堡包图标下。
在大屏幕尺寸时，IBM的左侧导航默认可见（上图）。在中等尺寸时，左侧导航折叠到汉堡包菜单下（下图）。
示例3：从桌面端到平板
我们的第三个示例来自Airbnb，一个住宿预订网站。在大屏幕尺寸时，屏幕上显示了一个房源列表和它们对应位置的地图。在小尺寸（对应平板设备）时，列表成为默认显示，地图则隐藏在一个按钮后面。
在大屏幕设备上，Airbnb同时显示可预订的房源的列表和地图（上图）。在小屏幕尺寸时，地图被折叠到一个按钮下（下图）。
使用断点进行设计的技巧
断点是响应式设计的基础，对于创建可用的布局和体验至关重要。
定义您的断点
如果您还没有确定断点，花些时间来设置它们。考虑上面讨论的常见范围，并根据需要进行调整。选择一个合理的命名规则（如T恤尺码），这样如果您需要更改断点，也可以方便地适应。例如，如果您发现大多数移动端用户现在在使用更大的智能手机，您可能需要调整移动端的断点以适应这些更大的显示屏尺寸。
在定义断点时，要让您的开发团队参与进来，因为这个团队将设置网站的断点。
如果您为一个已经存在的网站做设计，断点系统很可能已经被建立了起来。在这种情况下，花时间了解不同的断点，以便您能够适当地设计布局。
设计时考虑断点
一旦您定义了断点，思考设计（包括内容）将如何在这些不同的尺寸下流动和重新排列。问问自己：
在特定尺寸下，您的用户需要知道什么？
那些关键信息在该特定尺寸的布局中是否容易获取？
是否有什么需要从内容和布局的标准流程中改变的东西？
例如，在超小尺寸（移动端）时，空间有限。将左侧导航折叠到汉堡包图标下可以让用户专注于重要内容。
