协助调整桌面版与移动版的 CSS 字体。（不含@media）

问：

字体问题。

首先，我想说我在这方面不是很有经验，我已经搞砸了我的CSS文件几天了，它变得很累。我已经重新排列了我的容器以适合一条垂直线。我想我把它带到了我想要的地方。我在整个 CSS 中有不同的字体大小，因为我试图看看它在移动设备上有什么不同，但我并没有真正看到任何区别。我尝试使用 @media，但没有看到任何区别，可能是因为我的元标记的设置方式。我将宽度设置为 1024，因为这是我发现在不弄乱所有容器/表的情况下将页面适合移动设备的唯一方法。我的网站 www.dfshowdown.com，我尝试处理的特定页面是，如果您单击主页上的“优化器”按钮，然后单击下一页上的“生成”按钮，您将被重定向到我正在尝试更改字体的页面。主要是，我首先尝试调整 .lineup-info {，因为在移动设备上，由于某种原因，文本看起来比其他任何东西都大。

<meta name="viewport" content="width=1024">

这是我的CSS文件

    body {
            font-family: Arial, sans-serif;
            background-image: url('909153.jpg');
            background-size: cover; /* Ensures the image covers the entire viewport */
            background-repeat: no-repeat;
            background-attachment: fixed; /* Keeps the image fixed while scrolling */
            margin: 0;
            padding: 0;
            font-size:16px;  
            color: #FFFFFF; /* Text color on top of the image */
    background-position: center center;
    height: 100vh;
        }
     
 .container {
     top:20px;
    right:20px;
    background-color: #000000; /* Choose your fallback color here */
    background-color: rgba(0, 0, 0, .9); /* Semi-transparent background for content */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 165, 0, 1); /* Orange outer glow */
    padding: 20px;
    max-width: 900px; /* Adjust the width as needed */
    position: relative;
   margin:0 auto;
   text-align: center;
   
    /* Set a minimum top position based on content height */
    

 }
    h1, h2 {
        text-align: center;
        color: #FFA500; /* Orange header color */
        font-size:19px;  
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size:15px;    
        margin-top: 10px;
    }

    table, th, td {
        border: 1px solid #3D3D3D; /* Table border color */
        font-size:16px;
    }

    th, td {
        padding: 8px;
        font-size:16px;
      
    }

    th {
        background-color: #474747; /* Darker gray header color */
        color: #FFA500; /* Orange text color for headers */
        font-size:16px;
    }

    .lineup-info {
        margin-top: 10px;
        font-size: 16px !important;
    }
@media (max-width: 1024px) {
    .lineup-info {
        font-size: 16px !important;
}
}

@media (max-width: 767px) {
    .lineup-info {
        font-size: 16px !important;
}
}
@media (max-width: 575px) {
    .lineup-info {
        font-size: 14px !important;
}
}
@media (max-width: 425px) {
    .lineup-info {
        font-size: 10px !important;
}
}