Replit搭建网站移动端文本显示错位对齐异常如何修复

PC端正常、移动端全页面文本错位，是三个基础适配缺失导致的：

• 全局缺少移动端视口配置，手机浏览器默认按PC端宽度渲染页面后强制缩放，是排版错乱的首要原因
• 表单容器、网格类写死了固定像素宽度，小宽度屏幕下元素直接溢出、挤压错位
• 用大量<br>硬凑垂直间距、用已废弃的<center>标签做居中，这类硬编码样式在不同尺寸屏幕下没有自适应能力，这也是站点多个页面都出现同类问题的共性原因

按以下顺序修改，改完就能解决全站点的移动端适配问题：

1. 先在所有页面共用的基础模板的<head>标签内，第一行加入视口配置标签，这是所有移动端适配的前提，不加后续所有响应式代码都不会生效：

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

2. 删掉模板里所有连续堆叠的<br>标签、废弃的<center>标签，所有间距、居中效果全部用CSS实现，不要用HTML标签硬写样式。
3. 把下面的CSS加到全局样式文件里，所有页面共用，替换原来写死宽度的样式：

/* 全局盒模型修正，避免内边距撑破容器宽度 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 表单容器自适应：小屏占90%宽度，大屏最大宽度限制在800px，自动居中 */
.formdiv {
  width: 90%;
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}
/* 复选框网格响应式：自动根据屏幕宽度调整列数，窄屏自动变成单列，不会挤压错位 */
.checkbox-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0;
}
/* 标题字号自适应，避免小屏幕下大字号溢出换行错乱 */
h1 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  text-align: center;
}
h2 {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  margin: 2rem 0 0.8rem;
}

4. 修正模板代码的细节问题：你原来的复选框input没有配置id属性，和label的for属性不匹配，点击文本无法选中复选框，记得补上id属性。修改后的模板片段参考：

{%block content%}
{%include 'navbar.html'%}
{%endblock%}

<div class="formdiv">
<form method="POST" action="{{url_for('test_results')}}">
    <h1>A test to help you explore careers</h1>

    <h2>Are you ...?</h2>
    <ul class="checkbox-grid">
    {%for i in are_you%}
    {%for j in are_you[i]%}
    <li><input type="checkbox" name="{{i}}" id="{{i}}"><label for="{{i}}">{{j}}</label></li>
    {%endfor%}
    {%endfor%}
    </ul>

    <h2>Can you ...?</h2>
    <ul class="checkbox-grid">
    {%for i in can_you%}
    {%for j in can_you[i]%}
    <li><input type="checkbox" name="{{i}}" id="{{i}}"><label for="{{i}}">

补充：如果你的导航栏navbar也写了固定宽度，按同样的逻辑改成自适应宽度即可，不需要单独做特殊适配。

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