如何通过浏览器宽度与断点对象获取对应命名断点（JavaScript）

实现思路 #

核心是将断点的像素值转换为可比较的数字，按从大到小排序后，找到第一个数值大于当前窗口宽度的断点（对应逻辑为该断点是当前宽度的「上限」）。

代码实现 #

// 你的断点对象
const breakpoints = {
  large: "992px",
  medium: "768px",
  small: "500px",
  tiny: "320px",
  xlarge: "1384px"
};

function getCurrentBreakpoint() {
  // 将断点对象转换为包含名称和数值的数组，移除px单位并转为数字
  const breakpointList = Object.entries(breakpoints).map(([name, pxStr]) => ({
    name,
    width: parseInt(pxStr, 10)
  }));

  // 按断点数值从大到小排序
  breakpointList.sort((a, b) => b.width - a.width);

  const currentWidth = window.innerWidth;

  // 找到第一个宽度大于当前窗口宽度的断点
  const matchedBreakpoint = breakpointList.find(bp => bp.width > currentWidth);

  // 匹配到则返回名称，否则返回最大的断点（xlarge）
  return matchedBreakpoint ? matchedBreakpoint.name : breakpointList[0].name;
}

// 使用示例：窗口宽度为640px时，调用会返回"medium"
console.log(getCurrentBreakpoint());

逻辑说明 #

1. 转换与排序：把断点的键值对转成数组，提取纯数字宽度后从大到小排序，确保从最大的断点开始判断。
2. 匹配断点：遍历排序后的列表，第一个数值大于当前窗口宽度的断点就是对应名称——比如640px小于768px，因此返回medium。
3. 极端情况处理：如果窗口宽度大于所有断点数值（如1400px），直接返回最大的xlarge。

测试场景：

• 窗口宽度640px → 返回medium
• 窗口宽度800px → 返回large
• 窗口宽度400px → 返回small
• 窗口宽度1400px → 返回xlarge

内容的提问来源于stack exchange，提问作者lukemcd