如何为背景设置特定媒体查询？解决页面缩小后横向滚动问题

一、解决页面横向滚动问题 #

你设置width:100vw后出现横向滚动，是因为100vw包含浏览器垂直滚动条宽度，再加上body默认的外边距，导致容器超出视口。直接修改两处即可解决：

body{
  margin: 0; /* 移除body默认外边距 */
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
}

.main{
  width: 100%; /* 替换100vw，基于父元素宽度自适应 */
  background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(pexels-hasan-albari-1229861.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh; 
  overflow: hidden;
  background-repeat: no-repeat; /* 修正语法错误：no-repeat 而非 no repeat */
}

注意：你原代码里的background-repeat: no repeat是语法错误，必须写成no-repeat才能生效。

二、为背景设置媒体查询 #

媒体查询可以针对不同屏幕尺寸定制背景样式，比如更换背景图、调整渐变透明度、修改背景定位等，以下是实用示例：

示例1：移动端（宽度≤768px）替换背景图 #

/* 默认桌面端样式 */
.main{
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(desktop-bg.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh; 
  overflow: hidden;
  background-repeat: no-repeat;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .main{
    /* 更换背景图 */
    background-image: linear-gradient(to top, rgba(0,0,0,0.7)50%,rgba(0,0,0,0.7)50%), url(mobile-bg.jpg);
    /* 调整背景定位，让核心区域显示在移动端视口内 */
    background-position: 30% center;
  }
}

示例2：小高度屏幕（高度≤600px）调整背景大小 #

针对折叠笔记本等小高度屏幕，避免背景内容过度裁剪：

@media screen and (max-height: 600px) {
  .main{
    background-size: 150% auto; /* 放大背景图，保留更多内容 */
  }
}

媒体查询核心用法 #

基本语法：@media [媒体类型] and [条件] { /* 自定义样式 */ }
常用条件：

• max-width: 768px：屏幕宽度≤768px时生效（适配移动端）
• min-width: 1200px：屏幕宽度≥1200px时生效（适配大屏桌面）
• orientation: portrait：竖屏状态下生效
• max-height: 600px：屏幕高度≤600px时生效

内容的提问来源于stack exchange，提问作者Appiah Gabriel