如何使用css实现响应式全屏布局

来源:http://www.html-js.com时间:2017-02-13

  如何用css实现响应式全屏布局呢?满屏大图是当前比较流行的一种网页形式,本文将使用css的background-size属性,教您如何简单实现该效果。

  核心概念

  使用background-size 属性,填充整个viewport

  当css属性background-size 值为cover时,浏览器会自动按比例缩放背景图的宽和高,直到大于或等于viewport的宽和高

  使用媒体查询为移动设备提供更小尺寸的背景图

  为什么要给移动设备提供小尺寸背景图呢?在demo中,我们看到的背景图的实际尺寸为5498px * 3615px,使用这么大尺寸图片的目的是满足绝大多数宽屏显示器,并且不会显示模糊,而代价就是1.7MB的图片体积。

  但是在移动设备上没有必要使用这么大的图片,同时大图还会导致加载变慢,尤其是在移动网络下。

  需要说明的是:为移动设备提供小背景图对该技术方案来说是可选的。

  实践

  HTML

发表评论

最新评论(共0条)

1