Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive designmight sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I've put together a quick tutorial. I promise you can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge).

Step 1. Meta Tag (view demo)

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 or older doesn't support media query. You can use media-queries.jsor respond.js to add media query support in IE.

<!--[if lt IE 9]>

	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

Step 2. HTML Structure

In this example, I have a basic page layout with a header, content container, sidebar, and a footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide.

Step 3. Media Queries

CSS3 media query is the trick for responsive design. It is like writing if conditions to tell the browser how to render the page for specified viewport width.

The following set of rules will be in effect if the viewport width is 980px or less. Basically, I set all the container width from pixel value to percentage value so the containers will become fluid.

Then for viewport 700px or less, specify the #content and #sidebar to auto width and remove the float so they will display as full width.

For 480px or less (mobile screen), reset the #header height to auto, change the h1 font size to 24px and hide the #sidebar.

You can write as many media query as you like. I've only shown 3 media queries in my demo. The purpose of the media queries is to apply different CSS rules to achieve different layouts for specified viewport width. The media queries can be in the same stylesheet or in a separate file.

Conclusion

This tutorial is intended to show you the basics of responsive design. If you want more in-depth tutorial, check out my previous tutorial: Responsive Design With Media Queries.

Responsive Design in 3 Steps的更多相关文章

  1. 企业级的响应式设计（Responsive design at enterprise level）译

    导言 响应式设计是现在人们谈论的热点,但如何部署,特别是在有多种设备的大型项目中如何组织响应式设计,响应式设计和可伸缩性(Scalable)有什么区别?这都是需要解决的难题. 优化用户经验——Opti ...

  2. responsive design

    http://www.chinaz.com/manage/2011/1121/221607.shtml http://alistapart.com/article/responsive-web-des ...

  3. Responsive Design响应式网站设计心得笔记

    这个词已经喊了很久了,一直都是小打小闹,没正经的做过大的响应式全站,这次终于有机会了.网站刚上线半个月,就要改版为响应式设计,支持手机/PC等各类终端显示浏览.今天把首页做好,并测试无误,这里把一些应 ...

  4. Understanding Responsive Web Design: Cross-browser Compatibility

    http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...

  5. 转：15 Best Responsive Web Design Testing Tools

    Responsive Web Design is regarded as being the approach which suggests that web design and developme ...

  6. Responsive web design 学习笔记

    Advanced Styling with Responsive Design 此笔记为Coursera同名课程笔记. Week1 什么是响应式设计? 响应式设计: It is designing y ...

  7. iPhone 6 Screen Size and Web Design Tips

    Apple updated its iPhone a bit ago making the form factor much bigger. The iPhone 6 screen size is b ...

  8. Ace - Responsive Admin Template

    Ace简介: Ace 是一个轻量.功能丰富.HTML5.响应式.支持手机及平板电脑上浏览的管理后台模板,基于CSS框架Bootstrap制作,Bootstrap版本更新至 3.0,Ace – Resp ...

  9. 项目新的需求，网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

    网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...

随机推荐

  1. JGroups 入门实践(转)

    前言 JGroups是一个开源的纯java编写的可靠的群组通讯工具.其工作模式基于IP多播,但可以在可靠性和群组成员管理上进行扩展.其结构上设计灵活,提供了一种灵活兼容多种协议的协议栈. JGroup ...

  2. 处理FTP上传成功推理

    #登录FTPserver获取指定文件 #$1:server住址 #$2:帐户 #$3:password #$4:文件路径名 #$5:本地文件路径名 #$6:本地文件名 #比量ftp上传结果: #获取上 ...

  3. Swift开发学习(两)：Playground

    Swift开发学习:Playground 大约 对于软件用户.游戏玩家,我一直提倡用户体验.也是用户,是各种开发工具的使用者.也会喜欢用户体验做得好的工具软件.这次苹果想开发人员所想,提供了一个能够玩 ...

  4. Code Review中的几个提示

    原文:http://coolshell.cn/?p=1302  酷壳 Code Review中的几个提示 陈皓 Code Review应该是软件project最最有价值的一个活动,之前,本站发表过&l ...

  5. rails 4.0.2 + mongoid 对mongodb进行增删改查

    新建项目 rails new mongoid_app --skip-active-record --skip-test-unit --skip-bundle create create README. ...

  6. iOS一个开发系列中 - UIButton 使用摘要

    // 初始化button并设置类型 UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; // 可以定义的UIButto ...

  7. Unity3D根据游戏的发展Terrain Toolkit地形生产

     今天我们继续给我Unity3D游戏开发系列.今天我们来通过Terrain Toolkit为了使地形. 虽然Unity3D它为我们提供了一个地形渲染工具,我们发现,这个地形绘制工具并不能满足我们的 ...

  8. KMP算法（转）

    KMP算法 在介绍KMP算法之前,先介绍一下BF算法. 一.BF算法 BF算法是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串P的第一个字符进行匹配,若相等,则继续比较S的第二个 ...

  9. Java Main如何被执行？（转）

    java应用程序的启动在/hotspot/src/share/tools/launcher/java.c的main()函数中,而在虚拟机初始化过程中,将创建并启动Java的Main线程.最后将调用JN ...

  10. swift 笔记 (七) —— 关闭

    关闭 封闭件是从包括以下各项的组.它可以在代码被发送"片"... 行,不纠结的定义.继续. swift的闭包,有点像C和Objective-C语言里的 代码块 {--}  闭包能够 ...