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. UVA No Tipping

    Problem A - No Tipping As Archimedes famously observed, if you put an object on a lever arm,it will ...

  2. Python 获取Twitter用户与Friends和Followers的关系(eg, 交集，差集)

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-30 @author: guaguastd @name: f ...

  3. python 性能－ and-or 学习技能

    C语言类似表情: bool ? a : b ,当表达式值为真的话,值为a.否则为b. 看一个样例: >>> a = "first" >>> b ...

  4. div显示和隐藏

    它是实现比较简单.style.display控制层隐藏或显示属性. <html> <body> <script> function show(){ document ...

  5. LNK快捷方式漏洞利用方式 exp制作教程

    前言windows的shell32在处理控制面板程序的快捷方式文件时,存在一个漏洞,能够载入硬盘上的随意DLL文件,就可以运行随意代码. 漏洞文件的生成到“控制面板”以下,右键点“显示”,点“创建快捷 ...

  6. UVA 12538 Version Controlled IDE 解题报告

    题意:给三种操作 1．在p位置插入一个字符串． 2．从p位置开始删除长度为c的字符串 3．输出第v个历史版本中从p位置开始的长度为c的字符串 解法:可以用平衡树做,但是不会．后来又听说可一用一个叫ro ...

  7. 整理php操作memcache缓存为基础的方法

    php操作memcache共享缓存方法 采用memcache的前提下,是需要在服务器端被配置memcahche环境! 证实memcahce经过正常的连接可以在程序中使用! <?php /** * ...

  8. 看多csdn它还烂论坛？

    什么? 版权声明:本文博主原创文章,博客,未经同意不得转载.

  9. 【leetcode】Clone Graph（python)

    类似于二叉树的三种遍历,我们能够基于遍历的模板做非常多额外的事情,图的两种遍历,深度和广度模板相同也能够做非常多额外的事情,这里举例利用深度优先遍历的模板来进行复制,深度优先中,我们先訪问第一个结点, ...

  10. linux tar.gz zip 减压 压缩命令

    http://apps.hi.baidu.com/share/detail/37384818 download ADT link http://dl.google.com/android/ADT-0. ...