响应式设计中的断点

Both grids and layouts are essential components of responsive web design. In responsive design, the design adapts and reacts to device characteristics and screen sizes.  

网格和布局都是响应式网页设计的重要组成部分。在响应式设计中，设计会根据设备特性和屏幕尺寸进行适应和响应。

Grids provide an organized way to efficiently create layouts in web and mobile designs. A grid is made up of columns, gutters, and margins that provide a structure for the layout of elements on a page.

网格提供了一种在网页和移动设计中高效创建布局的有组织方式。网格由列、间距和边距组成，为页面上的元素提供结构。

A layout refers to how the different content and UI elements that make up a page are positioned on a screen. Layouts allow designers to utilize the space available on a screen or device to make the design and content most meaningful for users.  

布局指的是页面上组成页面的不同内容和用户界面元素在屏幕上的位置。布局允许设计师利用屏幕或设备上可用的空间，使设计和内容对用户最有意义。 

Grids are the structure that layouts are designed on. In addition to grids, breakpoints are fundamental in creating responsive designs.

网格是布局设计的结构。除了网格，断点在创建响应式设计中也是基础。

What Are Breakpoints?

什么是断点？

Breakpoints are the building blocks of responsive design. They allow designers to adjust the layout to fit the needs of various screen sizes and devices.

断点是响应式设计的基石。它们允许设计师根据不同的屏幕尺寸和设备调整布局。

A breakpoint defines a screen size where the design should adjust to a different layout.

断点定义了设计应该根据不同的布局进行调整的屏幕尺寸。

 Technically, a breakpoint is a specific screen size. When a window size hits that specific value, (for example, when because the user resized their browser window), the layout will change.

 从技术上讲，断点是特定的屏幕尺寸。当窗口尺寸达到该特定值时（例如，用户调整了浏览器窗口大小），布局将发生变化。

In practice, however, designers tend to use the word “breakpoint” to refer to the screen-size range (minimum and maximum width) for which a specific layout will be shown, because that is what they have to specify in media queries.  For example, a desktop breakpoint might range from 1200px to 1400px — meaning that the desktop layout will be shown on any screen with the width in that range.

然而，在实践中，设计师倾向于使用“断点”一词来指代屏幕尺寸范围（最小和最大宽度），因为这是他们在媒体查询中需要指定的。例如，桌面断点可能范围从1200像素到1400像素，意味着桌面布局将在该范围内的任何屏幕上显示。

As t...