移动端H5背景适应

关注

原创最新推荐文章于 2026-04-23 09:53:50 发布 186 阅读 AI 写同款· GEO 优化 ›

网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配兼容，这些问题很是头疼；　　兵来将挡，水来土掩，进过查阅相关技术资料，现已完美兼容PC端和移动端。下面就为大家详细讲解： PC端：　　PC端相应简单些，浏览器对<video>标签的兼容还是很好的，但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现； ... 阅读详情

问题描述:

在移动端开发中，当遇到内容高度不确定（不同设备比例各异）且需要背景图片宽度100%、高度自适应且不能变形和裁剪的情况时，可采用以下背景图片处理方案：若背景图片包含可重复部分，可将其拆分为上、中、下三部分：

顶部和底部保持固定宽高不变形
中间部分宽度与上下一致，高度自适应（用于衔接顶部和底部），设置repeat属性
确保顶部和底部背景图片层级始终高于中间部分

解决方案:

**.page {
  width: 100%;
  min-height: 750px;
  height: fit-content;
  box-sizing: border-box;
  /* 层级顺序：顶部→底部→中间，确保上下背景不被遮挡 */
  background-image: 
    url("bg_top.png"),
    url("bg_bottom.png"),
    url("bg_center.png");
    /*单位需要做移动端适配*/
  background-size: 750px 676px, 750px 248px, 750px 272px;
  background-repeat: no-repeat,no-repeat, repeat;
  background-position: center top, center bottom, center;
  /* 简写形式 */
	background: 
	  url("bg_top.png") no-repeat center top / 750px 676px,
	  url("bg_bottom.png") no-repeat center bottom / 750px 248px,
	  url("bg_center.png") repeat center / 750px 272px;
}
**