移动端与桌面端字体大小锁定方案咨询（HTML/CSS）

问题根源 #

你当前的媒体查询逻辑本身是正确的，但未达到预期效果的核心原因是HTML中缺少正确的viewport元标签——移动端浏览器会默认以桌面端宽度渲染页面，导致媒体查询失效、字体显示偏小或布局错乱。

分步解决 #

1. 添加viewport元标签
   在HTML的<head>标签内插入以下代码，让移动端浏览器按设备实际宽度渲染：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 优化CSS媒体查询
   你的现有代码可以保留，但调整默认字体顺序并补充布局适配，避免边距压缩问题：

/* 移动端默认字体（优先匹配，桌面端媒体查询会覆盖） */
p.text {
  font-size: 60px;
  margin: 0 1rem; /* 避免移动端文本贴边 */
}

/* 桌面端（屏幕宽度≥900px） */
@media screen and (min-width: 900px) {
  p.text {
    font-size: 30px;
    margin: 1rem auto;
    max-width: 1200px; /* 限制桌面端文本宽度，防止拉伸 */
  }
}

注：无需重复写移动端媒体查询，默认样式已覆盖，若后续要调整移动端样式，再单独添加max-width:899px的媒体查询即可

3. 菜单组件响应式适配（可选）
   如果移动端菜单字体也需要调整，可补充以下代码：

@media screen and (max-width: 899px) {
  .menu__item {
    font-size: 24px; /* 根据需求调整移动端菜单字体大小 */
  }
}

关键注意点 #

• 确保媒体查询断点无重叠（你的900px/899px设置是合理的）
• 避免给文本容器设置固定宽度，改用max-width适配不同屏幕
• 若仍有布局问题，检查是否有其他CSS规则（如全局重置、父容器样式）覆盖了当前字体或边距设置

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