网页适配屏幕问题及background-size属性疑问求助

Footer偏移及溢出问题 #

针对Footer左侧留空、右侧超出页面的情况，按以下步骤排查修复：

• 重置全局默认边距：浏览器默认会给body设置margin，直接导致页面出现间隙，添加代码：

  body { margin: 0; padding: 0; }
  

• 修正Footer宽度设置：如果Footer用了width: 100vw，当页面出现垂直滚动条时，100vw会包含滚动条宽度导致溢出，改成：

  .Footer { width: 100%; max-width: 100%; }
  

• 启用盒模型边界计算：如果Footer设置了padding或border，默认盒模型会让这些值额外增加元素宽度，导致溢出，添加：

  .Footer { box-sizing: border-box; }
  

• 清除浮动影响：如果Footer前的元素用了浮动，会导致Footer布局错位，添加：

  .Footer { clear: both; }
  

background-size:50%视觉不符问题 #

background-size的百分比是相对于元素自身的宽高，而非背景图片的原始尺寸，视觉不符大概率是这个逻辑导致的：

• 明确缩放方向：如果想让图片宽度为元素的50%，高度按比例自适应，写：

  .FullBody { background-size: 50% auto; background-repeat: no-repeat; }
  

  如果想让高度为元素的50%，宽度自适应则写background-size: auto 50%;
• 检查背景重复：如果没设置background-repeat: no-repeat，图片会重复平铺，视觉上会显得更大，务必加上该属性。

内容的提问来源于stack exchange，提问作者Harsh jain