周末闲来无事,做了一个响应式设计的例子。当然,由此并不能窥见响应式设计真谛之一斑。但,对于初次接触响应设计,对于响应式设计的概念依旧模糊不清的同学来说,或许是个启蒙!

闲语暂且不表,进入正题,这里没有太多的表述,直接上代码:

本例基于html5标签,所以为了兼容不支持html5标签的浏览器和不支持Media Query的浏览器引入以下文件:

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

下面是样式,也是本例的核心部分:

<style>
body { background: #000; font: normal 14px/2 '微软雅黑'; color: #464646; padding-top: 28px; }
* { padding: 0; margin: 0; list-style: none; font-style:normal }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
header { width: 980px; margin: 0 auto; }
header .name { font: bold 36px/48px Arial, Helvetica, sans-serif; color: #F90 }
header nav { height: 50px; background: #663; border-radius: 5px; text-align: center; }
header nav, header nav a { color: #fff }
header nav ul li { display: inline-block;*display:inline;*zoom:1; width: 200px; line-height: 50px; }
#container { margin: 12px auto; width: 980px; overflow: hidden; zoom: 1; }
#container article { width: 700px; background: #fff; border-radius: 5px; float: left;margin-bottom:10px;padding:0 12px;}
#container article h1 { height: 48px; }
#container article figure {text-align:center;}
#container article figure img { max-width: 100%; height: auto;margin:0 auto}
#container article section { margin: 20px; font-size: 12px; }
#container article section p { margin-top: 1em; text-indent: 2em }
#container aside { width: 240px; float: right; }
#container aside article { background: #fff; border-radius: 5px; font-size: 12px; padding: 10px; width:220px;margin-bottom:12px}
#container aside article h1{font:bold 14px/28px '微软雅黑';border-bottom:1px solid #eee;height:28px;}
#container aside article .imglist{font-size:0}
#container aside article .imglist li{display:inline-block;*display:inline;*zoom:1;width:66px;height:50px;border:1px solid #eee;overflow:hidden;margin-right:5px;margin-top:5px;}
#container aside article .imglist li img{width:62px;height:auto;margin:2px;}
footer { background: #669; width: 980px; margin: 12px auto; color: #fff; height: 36px; text-align: center; font: normal 12px/36px '微软雅黑'; border-radius: 5px; }
@media screen and (max-width:980px) {
header {width:100%;overflow:hidden;*zoom:1; }
header .name { font: bold 36px/48px Arial, Helvetica, sans-serif; color: #F90;text-align:center}
header nav { background: none; text-align: center; height:auto;width:100%;}
header nav ul li{display:block; background: #663; border-radius: 5px;margin:3px 0;height:30px;line-height:30px;width:100%;}
#container { margin: 12px auto; width: 100%; overflow: hidden; zoom: 1; }
#container article { width: 100%; background: #fff; border-radius: 5px; float: none ;padding:0;}
#container article h1 { width:95%;margin:0 auto }
#container article figure{ width:95%;margin:0 auto}
#container aside { width: 100%;; float: none; }
#container aside article { background: #fff; border-radius: 5px; font-size: 12px; padding: 10px; width:auto;margin-bottom:6px}
footer { background: #669; width: 100%; margin: 12px auto; height:auto;color: #fff; text-align: center; font: normal 12px/24px '微软雅黑'; border-radius: 5px; padding:12px 0}
footer em{width:95%;margin:0 auto;display:block;border-bottom:1px dotted #789}
}
</style>

下面就是html代码了:

<header>
<div class="name">Media Query Demo</div>
<nav>
<ul>
<li>产品product</li>
<li>设计design</li>
<li>前端front end</li>
</ul>
</nav>
</header>
<div id="container">
<article>
<h1>响应式Web设计</h1>
<figure>
<figcaption></figcaption>
<img src="data:images/img01.jpg"/> </figure>
<section>
<p>十一长假已然过去了一大半。今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些;夜里闭上眼,满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园。..也许需要出门走一走了。</p>
<p>OK开始说正经的了。在之前一篇译文中,我们了解了<a href="http://www.chinaz.com/manage/2011/1121/221607.shtml" target="_blank">响应式Web设计的概念、组成要素以及基本的实现思路</a>。今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习。</p>
<p>如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。</p>
<p>我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由"固定"方式改为"液态",布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。</p>
</section>
</article>
<aside>
<article>
<h1>最多访问文章</h1>
<ul>
<li>&middot;《全民编程》我在微软生活中所接触的 </li>
<li>&middot;Eclipse安装SVN插件方式简明介绍</li>
<li>&middot;使用Eclipse调试Java程序的10个技巧 </li>
<li>&middot;三步学会Java Socket编程 </li>
<li>&middot;程序员妻子自述: 那些程序员教给我的</li>
<li>&middot;我希望在20岁时就知道的26条时间管理 </li>
<li>&middot;详解Java解析XML的四种方法 </li>
<li>&middot;Java数组声明、创建、初始化 </li>
</ul>
</article>
<article>
<h1>最新发布照片</h1>
<ul class="imglist">
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
<li><img src="data:images/5.jpg"></li>
<li><img src="data:images/6.jpg"></li>
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
</ul>
</article>
</aside>
</div>
<footer><em>关于站长之家</em> <em>联系我们(电话)</em> <em>广告服务</em> <em>友情链接</em> <em>网站地图</em> <em>版权声明</em> <em>人才招聘</em></footer>

想看demo点击!

学习之响应式Web设计---一个实例的更多相关文章

  1. 什么是响应式Web设计?怎样进行?

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  2. 推荐35个新鲜出炉的响应式 Web 设计实例

    响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...

  3. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  4. 《响应式Web设计实践》学习笔记

    原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...

  5. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

  6. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  7. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  8. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  9. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

随机推荐

  1. C++对象的内存分布和虚函数表

    c++中一个类中无非有四种成员:静态数据成员和非静态数据成员,静态函数和非静态函数. 1.非静态数据成员被放在每一个对象体内作为对象专有的数据成员.    2.静态数据成员被提取出来放在程序的静态数据 ...

  2. (转)css3实现load效果

    本文转自:https://www.cnblogs.com/jr1993/p/4625628.html 谢谢作者 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: <div cl ...

  3. vue 高阶 provide/inject

    1.一般情况使用都是在app.vue配置为: provide () {return {isTest: this}}, 2.所有子组件都可以引用 拿到app.vue里面的所有数据 inject: ['i ...

  4. POJ 1741.Tree 树分治 树形dp 树上点对

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 24258   Accepted: 8062 Description ...

  5. 《C#从现象到本质》读书笔记(九)第11章C#的数据结构

    <C#从现象到本质>读书笔记(九)第11章C#的数据结构 C#中的数据结构可以分为两类:非泛型数据结构和泛型数据结构. 通常迭代器接口需要实现的方法有:1)hasNext,是否还有下一个元 ...

  6. Django的学习进阶(二)———— name

    一.问题: 在做完第一个demo的时候,由于只是基础学习,所以对于name的使用并不需要很熟练,也不用理解的很深.但是在做音乐网站的时候遇到了关于如何使用name的内容. 由于一个app中会使用到另一 ...

  7. vue全局后置钩子afterEach

    beforeEach是路由跳转前执行的,afterEach是路由跳转后执行的. afterEach只有两个参数  afterEach((to,from)=>{}) 例子: router.afte ...

  8. Chapter7 抑癌基因

    一.实验证明,如果肿瘤不是肿瘤病毒产生时,与正常细胞融合后,其恶性表型是隐形的 二. 家族性视网膜母细胞瘤的形成模型 如何使得一个细胞获得两个突变(两次随机的突变可能性太小) 模型一:有丝分裂的同源重 ...

  9. 跨域访问问题js

    您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据 访问百度的地址解析  返回来省,地区,市 $.getJSON("http://api.map.baidu.com/clou ...

  10. [smf]论坛实现编辑器附件插入的插件

    smf论坛代码的相关介绍,可以参见博客园的其他文章,这里不再详细说明了. 插件功能: 在帖子里的任何位置插入附件图片. 关于安装: 该插件已经经过“维尼熊的百宝箱”的修改,在新版本SMF 2.0.14 ...