响应式Todo List开发：Tailwind中rem导致移动端复选框缩小怎么解决？

rem尺寸跨端不一致通常由两个原因导致：一是移动端viewport配置缺失，浏览器自动缩放页面；二是html根字体基准未统一，不同设备默认根字体大小差异导致rem计算结果偏差，可通过以下方案解决：

• 配置正确的viewport元标签
  检查项目入口html文件head节点是否添加如下配置，缺失则补充即可：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

该配置会锁定移动端页面缩放比例，保证逻辑像素与设备宽度对齐，避免元素被强制缩放。

• 改用固定像素尺寸
  如果不需要复选框跟随全局字体大小动态变化，直接用px作为尺寸单位即可彻底避免rem基准变动的影响，示例代码如下：

<input
  type="checkbox"
  name="checked-demo"
  className="form-tick appearance-none flex-initial bg-white bg-check border border-gray-300 rounded-md checked:bg-blue-500 checked:border-transparent focus:outline-none"
  style={{width: '24px', height: '24px', minWidth: '24px'}}
/>

• 统一全局rem基准
  如果要保留rem的响应式特性，可在全局CSS中固定html根字体大小，抹平不同浏览器的默认值差异：

html {
  font-size: 16px;
}
/* 如需适配小屏可按需添加媒体查询调整根字体 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

• 补充尺寸下限避免布局挤压
  你现有代码已经添加了最小宽度限制min-w-6，可补充min-h-6同时限制最小高度，避免flex布局下元素被内容挤压缩小：

<input
  type="checkbox"
  name="checked-demo"
  className="form-tick appearance-none flex-initial bg-white bg-check h-6 w-6 min-w-6 min-h-6 border border-gray-300 rounded-md checked:bg-blue-500 checked:border-transparent focus:outline-none"
/>

大屏设备	移动设备

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