第一步. Meta 标签 (查看 demo)
为了适应屏幕,多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度,并且忽视初始的宽度设置。这段代码写在 <head>里面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
IE8及以下的浏览器不支持media query。你可以使用media-queries.js 或 respond.js 。这样IE就能支持media query了。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
第二步. HTML 结构
这个例子里面,有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px,content 容器的宽是600px,sidebar的宽是300px。
第三步. Media Queries
CSS3 media query 响应式网页设计的关键。它像一个if语句,告诉浏览器如何根据特定的屏幕宽口来加载网页。
如果屏幕窗口小于980px,下面的规则就生效。在这里,我设置了容器的宽度为百分比的形式而不是像素单位,这样会更加灵活。
如果屏幕窗口小于700px, 定义 #content 和 #sidebar 为自适应宽度,并移除它的浮动属性,这样它会全屏显示。
如果屏幕窗口小于480px (移动设备的屏幕), 设置#header 高为自适应,把h1字体设置为24px,并且隐藏#sidebar。
这些media query,你可以写很多。在这个demo,我只写了三个。media query的目的是应用不同的CSS规则来实现屏幕的最佳布局。它可以写在同一个CSS文件,也可以写在不同的文件。
结论
这个教程的目的是展示响应式设计的基本原理。如果你要更加深入的学习,查看这个: Responsive Design With Media Queries.
相关推荐
本资源演示了如何使用媒体查询的方式开发移动设备优先的响应式布局网页。
响应式网页设计:Bootstrap开发速成的配套资源,提供120多个Bootstrap功能范例网页文件,说明如何使用Bootstrap框架所提供的各种CSS与组件等内容,最终以3个完整实例(书籍宣传网页、产品推广网页、网站首页)制作出...
Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计...
html响应式网页设计代码范文-UI设计响应式网页设计与栅格化.pdf
随着PC端、平板、智能手机等终端的发展,设备环境(系统平台、屏幕尺寸、屏幕分辨率等)更加复杂,网页展示需要考虑到...因此,响应式设计受到了大家的推崇。本资料包含四个免费的响应式网页模板,希望对大家有帮助。
响应式网页设计师个人主页单页网站html模板
《响应式网页开发实战》教学教案—第1章 响应式网页概述.pdf《响应式网页开发实战》教学教案—第1章 响应式网页概述.pdf《响应式网页开发实战》教学教案—第1章 响应式网页概述.pdf《响应式网页开发实战》教学教案—...
网页设计资料
基本上都是本网页设计的所有知识点,很全面,基本上有所有响应式的知识在里面
响应式网页设计的经典书籍,英文原版,蓝皮书,pdf+epub格式
星巴克响应式网页项目源码.zip星巴克响应式网页项目源码.zip星巴克响应式网页项目源码.zip星巴克响应式网页项目源码.zip星巴克响应式网页项目源码.zip星巴克响应式网页项目源码.zip星巴克响应式网页项目源码.zip...
网页设计资料
HTML5响应式网页设计.docx
网页中的图形设计是在线内容用户体验的关键,尤其是现在的用户会使用多种设备访问网页,如智能手机、平板电脑、笔记本电脑、桌面电脑,甚至是智能电视。《响应式Web图形设计》以创建响应式Web的角度,介绍了基础的...
基于bootstrap框架,实现网页的响应式开发;banner轮播,tab选项卡切换
关于网页布局的设计, HTML 响应式 Web 设计,响应式 Web 设计让你的网页能在所有设备上有好显示。 响应式 Web 设计只使用 HTML 和 CSS。 响应式 Web 设计不是一个程序或Javascript脚本。
响应式网页设计提供了 一种设计方法,可以使同一网站在智能手机、桌面电脑,以及介于这两者之间的任意设 备上完美显示。这种方法能够根据用户的屏幕尺寸,合理地为现有及将来的各种设备提 供最佳的浏览体验。 本书...
当今最最时髦的响应式网页设计,优秀ppt共享
【Web网页设计制作-毕业设计期末大作业源码】(FZY014)倾情奉献绿色响应式手机网站模板
享誉国外的很有名的一本书,响应式网页设计 - Responsive WebDesign,高清PDF版本!火速分享!