关于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%; }
}