Flex容器缩放时如何让内部Flex项保持相对比例，解决移动端文字过小问题

开发者阿泽

2026-10-8

修复方案

修正媒体查询语法错误：你当前代码中媒体查询开头多写了一个@，错误的@@media会导致整段移动端样式完全失效，改为标准的@media即可生效。
添加viewport适配标签：在HTML的<head>标签内添加移动端适配基础元标签，未添加该标签时移动端浏览器会默认以桌面端宽度渲染页面，导致所有元素被等比缩小：

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

优化字体单位配置：仅用vw作为单位在超小屏上容易出现文字过小的问题，改用clamp()函数设置字体的最小、自适应、最大三个阈值，同时补充容器宽度、内边距等适配规则，保证在各类屏幕尺寸下的可读性，修改后的媒体查询代码参考：

@media (max-width: 780px) {
  .flex-container {
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
  }
  .card{
    max-width: 75%;
    margin: 16px auto;
  }
  h4{
    font-size: clamp(18px, 4vw, 24px);
    text-align: left;
  }
  p{
    font-size: clamp(14px, 2.5vw, 18px);
    text-align: left;
  }
  .container {
    padding: 12px;
    box-sizing: border-box;
  }
}