本文总结了响应式网页设计的关键概念，利用CSS3的Media Query实现不同设备上的网页布局调整。通过介绍Media Query的基本语法和属性，以及创建简单响应式HTML结构的实例，展示了如何创建适应多种屏幕尺寸的网页。通过设置不同宽度阈值的媒介查询，调整元素布局，以达到在手机、平板和桌面设备上良好展示的效果。
最近几天学习了CSS3响应式设计，那么就来做一下简单的总结：
响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。
下面来看一下如何实现响应式布局，有几种方法
通常我们使用第一种方法，虽然它不能满足所有用户需求，但能满足大部分需求。
在做实例之前先来简单了解一下Media Query的一些常见属性和基本语法
开始做一个简单的实例。
先做一个简单的HTML结构
设置媒介查询：媒介查询-Media Queries
在这里设置了三个像素方便比较。第一个当宽度小于980像素时，基本将所有元素宽度设置成适应屏幕大小
第二个当宽度小于等于700像素指定#section和#aside的宽度为自适应并且清除浮动，让这些容器按全宽度显示。
第三个当小于等于480像素（手机屏幕）时，将#header元素的高度设置为自适应并隐藏侧边栏。
这样，一个简单的响应式Web页面就搭建出来了，动手试试吧！
（1，2，3图片来源 imooc.com）
扫一扫
3679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
