CSS 弹性框 |网格图块放置问题 [已关闭]

问：

有没有一种简单的方法使用CSS flexbox或网格来使这种布局响应移动和桌面，以缩小页面而不会溢出，我想摆脱硬编码的px放置，寻找最有效的解决方案，这张图片目前只适合并适用于桌面，这将是我的开发人员组合， 请参阅以下网址，了解当前展示位置的图片

光模式

黑暗模式

:root {
    --bg-color: #DCDCDC;
    --text-color: #333;
    --feature-bg-color: #fff;
    --spec-bg-color: #fff;
    --spec-text-color: #333;
    --weather-bg-color: #f9f9f9;
    --weather-text-color: #333;
    --weather-border-color: #ccc;
}

[data-theme='dark'] {
    --bg-color: #333;
    --text-color: #f4f4f4;
    --feature-bg-color: #444;
    --spec-bg-color: #444;
    --spec-text-color: #f4f4f4;
    --weather-bg-color: #444;
    --weather-text-color: #f4f4f4;
    --weather-border-color: #666;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.product-specs {
    font-family: 'Lato', sans-serif;
    position: relative;
    width: 2000px;
    height: 1000px;
    background-color: var(--bg-color);
    border-radius: 15px;
    margin: 50px auto;
    padding: 20px;
    box-sizing: border-box;
}

.feature {
    position: absolute;
    width: 1230px;
    height: 545px;
    top: 200px;
    left: 475px;
    background-color: var(--feature-bg-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spec {
    position: absolute;
    background-color: var(--spec-bg-color);
    border-radius: 20px;
    padding: 10px;
    color: var(--spec-text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.spec:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.spec.top-left3 button {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 140px;
    background-color: var(--spec-bg-color);
    border-radius: 20px;
    border: none;
    cursor: pointer;
    color: var(--spec-text-color);
    font-family: inherit;
    font-size: inherit;
    text-align: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.spec.top-left3 button img {
    width: 55%; 
    height: auto;
    margin-top: 5px;
}

.spec.top-left3 button:hover {
    background-color: var(--feature-bg-color);
}

.icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.digital-clock {
    font-size: 48px;
    font-family: 'Digital', sans-serif;
    text-align: center;
    color: var(--spec-text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.time-section {
    margin: 1px 0;
}

.top-left {
    top: 20px;
    left: 20px;
    width: 235px;
    height: 320px;
}
.top-left2 {
    top: 20px;
    left: 275px;
    width: 930px;
    height: 160px;
}
.top-left3 {
    top: 200px;
    left: 275px;
    width: 180px;
    height: 140px;
}
.top-right {
    top: 20px;
    right: 20px;
    width: 755px;
    height: 160px;
}

.middle-left {
    top: 360px;
    left: 20px;
    width: 435px;
    height: 385px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.middle-right {
    top: 200px;
    right: 20px;
    width: 255px;
    height: 780px;
}
.bottom-left {
    bottom: 20px;
    left: 20px;
    width: 870px;
    height: 215px;
}
.bottom-center {
    bottom: 20px;
    left: 910px;
    width: 550px;
    height: 215px;
}
.bottom-right {
    bottom: 20px;
    right: 295px;
    width: 225px;
    height: 215px;
}

.spec.bottom-left img {
    display: block; 
    width: 100%; 
    height: auto; 
}

.spec.middle-left img {
    display: block; 
    width: 90%; 
    height: auto; 
}

.weather-widget {
    position: absolute; 
    background-color: var(--spec-bg-color);
    border-radius: 20px;
    padding: 10px;
    bottom: 20px;
    left: 910px;
    width: 550px;
    height: 215px;
    color: var(--spec-text-color);
    flex-direction: row;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
}

.weather-widget .info {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; 
    padding-left: 15px; 
}

.weather-widget img {
    flex: 1; 
    max-width: 50%; 
    height: auto; 
    padding-right: 20px; 
}

.weather-widget .city {
    font-size: 40px; 
    font-weight: 600;
    color: var(--weather-text-color);
}

.weather-widget .feels-like {
    font-size: 10px; 
    font-weight: 600;
    color: var(--weather-text-color);
}

.weather-widget .temperature {
    font-size: 38px;
    margin: 1px 0; 
    color: var(--weather-text-color);
}

.weather-widget .description {
    font-size: 22px;
    color: var(--weather-text-color);
    margin-top: 1px; 
}

.error-message {
    color: var(--weather-text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

[data-theme='dark'] .weather-widget img {
    filter: invert(1); 
}