Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
EM断点生成器 - px转em响应式断点生成工具
一款免费的在线 EM Breakpoint Generator。支持像素值转em单位、媒体查询代码自动生成。帮助开发者创建更精准的响应式布局。
通常浏览器默认为 16px
每行输入一个像素值，如：320、576、768
bp1320px
→20.00em
bp2576px
→36.00em
bp3768px
→48.00em
bp4992px
→62.00em
bp51200px
→75.00em
bp61400px
→87.50em
@media (min-width: 20.00em) {
/* xs (320px) */
/* 在此处添加样式 */
}
@media (min-width: 36.00em) {
/* sm (576px) */
/* 在此处添加样式 */
}
@media (min-width: 48.00em) {
/* md (768px) */
/* 在此处添加样式 */
}
@media (min-width: 62.00em) {
/* lg (992px) */
/* 在此处添加样式 */
}
@media (min-width: 75.00em) {
/* xl (1200px) */
/* 在此处添加样式 */
}
@media (min-width: 87.50em) {
/* 2xl (1400px) */
/* 在此处添加样式 */
}# 什么是 EM 单位？
EM 是 CSS 中的相对单位，它相对于当前元素的字体大小。 如果当前元素的字体大小是 16px，那么 1em 就等于 16px，2em 等于 32px。 EM 单位的主要优势在于它能够随着字体大小的变化而自动调整，这使得它在响应式设计中非常有用。
在媒体查询中使用 EM 单位而不是像素单位是一个最佳实践， 因为当用户在浏览器中调整默认字体大小时，基于 EM 的断点会相应缩放， 而基于像素的断点则保持不变。这确保了网页在不同用户设置下都能正常显示。
# 为什么使用 EM 作为断点单位？
- 可访问性：当用户调整浏览器默认字体大小时，EM 断点会相应缩放，确保布局适应
- 一致性：EM 单位与字体大小相关，提供了更一致的设计系统
- 灵活性：更容易实现真正的响应式设计，适应不同设备和用户偏好
- 最佳实践：这是现代响应式设计的推荐方法，被许多大型网站采用
# 常用断点参考
/* 移动设备优先 */
320px → 20em /* 小型手机 */
375px → 23.44em /* 常见手机 */
576px → 36em /* 横屏手机 */
768px → 48em /* 平板设备 */
992px → 62em /* 桌面显示器 */
1200px → 75em /* 大屏幕 */
1400px → 87.5em /* 超大屏幕 */# 如何使用本工具
- 设置基准字号（通常为浏览器默认的 16px）
- 在文本框中输入像素值断点，每行一个
- 工具会自动计算对应的 EM 值
- 复制生成的媒体查询代码到您的 CSS 文件中
# 响应式设计最佳实践
/* 移动优先策略 */
@media (min-width: 36em) {
/* 平板及以上 */
.container { max-width: 720px; }
}
@media (min-width: 48em) {
/* 桌面及以上 */
.container { max-width: 960px; }
}
@media (min-width: 62em) {
/* 大屏幕 */
.container { max-width: 1140px; }
}
/* 或使用桌面优先 */
@media (max-width: 75em) {
/* 小于大屏幕 */
.container { padding: 0 1rem; }
}# 常见问题 (FAQ)
EM 和 REM 有什么区别？
EM 相对于当前元素的字体大小，可能会产生累积效应； REM 相对于根元素（html）的字体大小，更加可控和可预测。 在媒体查询中，通常推荐使用 EM 单位。
如何选择断点值？
断点应该基于内容而非设备。先在移动设备上设计，然后逐步增加屏幕宽度， 在布局看起来需要调整的地方添加断点。常用参考值包括 320px（小型手机）、 768px（平板）、1024px（桌面）等。
应该使用 min-width 还是 max-width？
现代响应式设计推荐使用"移动优先"策略，即使用 min-width 媒体查询。 这种方法从移动设备开始设计，然后为更大的屏幕添加增强功能。 它的代码更简洁，性能也更好。如果您需要支持旧的桌面网站， 可以使用 max-width 进行"桌面优先"的设计。