關于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%; }
}
浙公網安備 33010602011771號