响应式CSS可以在移动设备上工作，但不能在桌面上工作

我有一个非常拥挤的设计，我很难做出反应。 基本上，使用“max width:1024px”媒体查询，当处于移动模式时，整个布局都适合，因为如果我理解正确的话，这种模式会尝试适应窗口中的所有内容

问题是，对于相同的屏幕大小，但没有移动模式，它根本不适合。 如果在媒体查询中，我将窗口的高度调大，比如说140vh，那么如果在桌面上运行良好，但在移动模式下，所有元素都太明显了

基本上，我想知道如何为同样大小的手机和台式机制作一个布局

代码如下：

@导入url（'https://fonts.googleapis.com/css2?family=Inter:wght@100；300；400；500；700&display=swap'）；
：根{
--初级：#252b42；
--绿色：#1eb589；
--红色：#dc414c；
--蓝色：1da1f2；
--bc:#20222f；
--文字灯：#8c98c6；
}
* {
填充：0；
保证金：0；
框大小：边框框；
}
/*工具*/
.电网{
显示：网格；
}
.flex{
显示器：flex；
}
.font白色{
颜色：白色；
}
.font灰色{
颜色：var（--文本光）；
}
.font绿色{
颜色：var（--绿色）；
}
.font红色{
颜色：var（--红色）；
}
/*字体*/
html{
字体大小：14px；
字体系列：“Inter”，无衬线；
}
h1{
字号：2rem；
字体大小：粗体；
}
氢{
字号：1rem；
字体大小：粗体；
}
h3{
字体大小：0.9rem；
字体大小：粗体；
}
h4{
字号：4rem；
字体大小：粗体；
线高：48px；
字母间距：-2px；
}
h5{
字体大小：400；
字母间距：5px；
}
h6{
字体大小：0.9rem；
字体大小：粗体；
}
.号码{
字体大小：2.3rem；
字体大小：粗体；
}
/* ///////////////////////////////////////////// */
/*身体*/
身体{
背景色：var（--bc）；
/*溢出y：隐藏*/
}
.包装纸{
弯曲方向：立柱；
高度：100vh；
/*保证金：2rem自动4rem*/
保证金：0自动；
宽度：80%；
对正内容：空间均匀；
}
/*标题*/
标题{
证明内容：之间的空间；
}
.暗模式{
弯曲方向：行；
对齐项目：居中；
自我证明：空间之间；
}
/*仪表板*/
.仪表板{
网格模板柱：1fr 1fr 1fr 1fr；
网格模板行：1fr；
证明内容：之间的空间；
柱间距：28px；
}
/*网格项*/
.dashboard.grid项{
位置：相对位置；
弯曲方向：立柱；
对齐项目：居中；
对正内容：空间均匀；
/*宽度：255px*/
高度：216px；
边界半径：5px；
背景色：var（--主色）；
}
.颜色{
高度：3倍；
宽度：100%；
显示：固定；
/*边缘顶部：-2rem*/
位置：绝对位置；
排名：0；
边界半径：5px5px0；
}
/*贴纸颜色*/
#蓝色的{
背景色：var（--蓝色）；
}
#免疫球蛋白{
背景：线性梯度（70度，#df4896，#ee877e，#fdc366）；
}
#红色的{
背景色：var（--红色）；
}
.网络{
显示器：flex；
对齐项目：居中；
}
.network.pseudo{
左边距：4倍；
}
.追随者{
对齐项目：居中；
}
.追随者人数{
文本对齐：居中；
}
.单位{
页边顶部：1rem；
文本转换：大写；
文本对齐：居中；
}
.今天{
显示器：flex；
对齐项目：居中；
}
.今天img{
高度：4px；
右边距：5px；
}
/*概述*/
.概述{
网格模板列：重复（4，1fr）；
网格模板行：1fr；
栅隙：28px；
}
.概述.表格项目{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
高度：125px；
边界半径：5px；
背景色：var（--主色）；
}
.上半场，
.下半部分{
宽度：80%；
身高：80%；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
文本对齐：居中；
对齐项目：居中；
}
/*悬停状态*/
.表格项目{
光标：指针；
过渡：背景0.2s缓进缓出；
}
.网格项：悬停{
背景色：#333a55；
}
/*反应性*/
@媒体屏幕和屏幕（最大宽度：1280px）{
html{
字体大小：13px；
}
/*.表格项目{
宽度：215px；
} */
}
/*小屏幕*/
@媒体屏幕和屏幕（最大宽度：1024px）{
.包装纸{
宽度：90%；
/*高度：140vh*/
}
.电网{
栅隙：17px；
}
/*底部网格*/
.概述{
网格模板列：重复（3，1fr）；
}
}

前端导师|[此处为挑战名称]
CSS网格
自动填充
和
自动拟合
您的代码设置得很好！CSS网格的好处在于，您实际上不必利用
@media
查询您所寻找的功能。使用CSS中的
minmax（）
函数，以及网格
自动填充
和
自动拟合
，您可以实现一种响应性强的设计，与您当前拥有的功能完美配合


@导入url（'https://fonts.googleapis.com/css2?family=Inter:wght@100；300；400；500；700&display=swap'）；
：根{
--初级：#252b42；
--绿色：#1eb589；
--红色：#dc414c；
--蓝色：1da1f2；
--bc:#20222f；
--文字灯：#8c98c6；
}
* {
填充：0；
保证金：0；
框大小：边框框；
}
/*工具*/
.电网{
显示：网格；
}
.flex{
显示器：flex；
}
.font白色{
颜色：白色；
}
.font灰色{
颜色：var（--文本光）；
}
.font绿色{
颜色：var（--绿色）；
}
.font红色{
颜色：var（--红色）；
}
/*字体*/
html{
字体大小：14px；
字体系列：“Inter”，无衬线；
}
h1{
字号：2rem；
字体大小：粗体；
}
氢{
字号：1rem；
字体大小：粗体；
}
h3{
字体大小：0.9rem；
字体大小：粗体；
}
h4{
字号：4rem；
字体大小：粗体；
线高：48px；
字母间距：-2px；
}
h5{
字体大小：400；
字母间距：5px；
}
h6{
字体大小：0.9rem；
字体大小：粗体；
}
.号码{
字体大小：2.3rem；
字体大小：粗体；
}
/* ///