响应式Web设计总结

最近几天学习了CSS3响应式设计,那么就来做一下简单的总结:

        响应式网页设计(Responsive web design)是一种现代网页设计方法,基于CSS3的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局。

           下面来看一下如何实现响应式布局,有几种方法响应式Web设计总结_第1张图片

        

通常我们使用第一种方法,虽然它不能满足所有用户需求,但能满足大部分需求。

在做实例之前先来简单了解一下Media Query的一些常见属性和基本语法

响应式Web设计总结_第2张图片 响应式Web设计总结_第3张图片


开始做一个简单的实例。

先做一个简单的HTML结构响应式Web设计总结_第4张图片

设置媒介查询:媒介查询-Media Queries

在这里设置了三个像素方便比较。第一个当宽度小于980像素时,基本将所有元素宽度设置成适应屏幕大小响应式Web设计总结_第5张图片

第二个当宽度小于等于700像素指定#section和#aside的宽度为自适应并且清除浮动,让这些容器按全宽度显示。响应式Web设计总结_第6张图片

第三个当小于等于480像素(手机屏幕)时,将#header元素的高度设置为自适应并隐藏侧边栏。响应式Web设计总结_第7张图片


这样,一个简单的响应式Web页面就搭建出来了,动手试试吧!

(1,2,3图片来源 imooc.com)

你可能感兴趣的:(实用技术贴)