颜色格式转换
转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。
CSS clamp 响应式字号生成器
用最小与最大字号、视口宽度生成响应式 clamp()，支持 px、rem 和字号预览。
rem 按填写的根字号计算；应用到页面后，请检查浏览器缩放和大字体设置下的效果。
恰当的字号，让每一段文字都清晰易读。
CSS
工具介绍
确定标题在手机和桌面端的最小、最大字号，检查两者之间如何平滑变化。
使用说明
填写最小、最大字号及对应的两个视口宽度，选择 px 或 rem。拖动模拟视口滑杆查看当前计算字号，再复制或下载生成的 font-size: clamp(...) 声明。两个视口宽度必须递增，最小字号不能大于最大字号。
字号在指定范围内随视口宽度线性变化，范围外保持上下限。rem 计算使用填写的根字号，请与目标页面设置一致。此公式基于视口宽度，不是容器宽度，也不会改写页面其他排版规则。
常见问题
使用 rem 时为什么要设置根字号？
预览需要用根字号把 rem 换成像素，应与实际页面一致。导出公式按视口宽度变化，根字号不同也会改变实际表现。
想让手机字号为 16px、桌面为 32px，该怎样设置？
例如希望视口宽 400px 时为 16px、宽 1200px 时为 32px，选择 px 后填入这两组值，会得到 clamp(16px, 8px + 2vw, 32px)。在 800px 视口下是 24px，范围外保持上下限；计算依据是视口宽度，不是容器宽度。
相关工具
在新标签页打开
评论
0