您的位置: 首页 > 软件教程 > DIV+CSS教程专题 > 如何使用css实现响应式全屏布局

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

6.0分
出处:http://www.html-js.com 时间:2017-02-13

您可能感兴趣的话题: 响应式布局  

核心提示:本文将简单介绍如何在css中实现响应式布局。

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

  核心概念

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

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

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

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

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

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

  实践

  HTML

网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
HTML的中文叫做“超文本标记语言”。是用来... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
1