關于scss多媒體全局布局左側一直留白的bug

改前:
// 必須第一行使用 @use 引入變量（Sass 現代標準）
@use './variables' as *;

// 響應式設置，基礎字體和全局字體，適配所有設備
html {
font-size: 100%; // 默認16px，可結合rem/em靈活適配
box-sizing: border-box;
// 可加用戶自定義字體縮放支持
}

body {
font-size: $font-size-base; // 使用變量
color: $primary-color; // 使用變量
margin: 0;
padding: 0;
font-family: 'Roboto', Arial, sans-serif;
background: #f5f6fa;
min-height: 100vh; // 保證全屏撐滿
width: 100vw;
overflow-x: hidden;
}

// 讓所有元素都繼承box-sizing，防止布局抖動
*, *::before, *::after {
box-sizing: inherit;
}

// 響應式自適應布局，移動端友好
@media (max-width: 600px) {
html {
font-size: 90%; // 手機縮小基礎字體
}
body {
padding: 0 2vw;
}
}

// 平板優化
@media (min-width: 601px) and (max-width: 1200px) {
html {
font-size: 100%;
}
body {
padding: 0 5vw;
}
}

// PC端大屏
@media (min-width: 1201px) {
html {
font-size: 110%;
}
body {
padding: 0 10vw;
}
}

很明顯了，在切媒體的時候加了padding。。。

改后:

@use './variables' as *;

html, body, #app {
margin: 0;
padding: 0;
width: 100vw;
min-width: 0;
height: 100vh;
min-height: 0;
background: #f5f6fa;
box-sizing: border-box;
overflow-x: hidden;
font-family: 'Roboto', Arial, sans-serif;
font-size: $font-size-base;
color: $primary-color;
}

// 保證所有元素都繼承box-sizing，避免抖動
*, *::before, *::after {
box-sizing: inherit;
}

// 響應式自適應只調整字體，不對body加padding！
@media (max-width: 600px) {
html { font-size: 90%; }
}

@media (min-width: 601px) and (max-width: 1200px) {
html { font-size: 100%; }
}

@media (min-width: 1201px) {
html { font-size: 110%; }
}