See It in Action First
Before you start, check the final demo to see how it looks like. Resize your browser to see how the layout automatically flows based on the width of the viewport (browser viewing area).
More Examples
If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, andWumblr.
Overview
The page's container has a width of 980px which is optimized for any resolution wider than 1024px. Media query is used to check if the viewport is narrower than 980px, then the layout will turn to fluid width instead of fixed width. If the viewport is narrower than 650px, it expands the content container and sidebar to fullwidth to form a single column layout.
HTML Code
I'm not going to go through the details of the HTML code. Below is the main structure of the layout. I have a "pagewrap" container that wraps the "header", "content", "sidebar", and "footer" together.
<div id="pagewrap">
<header id="header">
<hgroup>
<h1 id="site-logo">Demo</h1>
<h2 id="site-description">Site Description</h2>
</hgroup>
<nav>
<ul id="main-nav">
<li><a href="#">Home</a></li>
</ul>
</nav>
<form id="searchform">
<input type="search">
</form>
</header>
<div id="content">
<article class="post">
blog post
</article>
</div>
<aside id="sidebar">
<section class="widget">
widget
</section>
</aside>
<footer id="footer">
footer
</footer>
</div>
HTML5.js
Note that I use HTML5 markup in my demo. Internet Explorer prior than version 9 doesn't support the new elements introduced in HTML5 such as <header>, <article>, <footer>, <figure>, etc. Including the html5.js Javscript file in the HTML document will enable IE to acknowledge the new elements.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS
Reset HTML5 Elements to Block
The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element.
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
Main Structure CSS
Again, I'm not going to get into the details. The main "pagewrap" container is 980px wide. Header has a fixed height 160px. The "content" container is 600px wide floated left. The "sidebar" content is 280px wide floated right.
#pagewrap {
width: 980px;
margin: 0 auto;
}
#header {
height: 160px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 280px;
float: right;
}
#footer {
clear: both;
}
Step 1 Demo
Here is the design demo. Note that the media queries haven't been implemented yet. Resize the browser window and you should see that the layout is not scalable.
CSS3 Media Query Stuffs
Now here comes the fun part — media queries.
Include Media Queries Javascript
Internet Explorer 8 or older versions doesn't support CSS3 media queries. You can enable it by adding the css3-mediaqueries.js Javascript file.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Include Media Queries CSS
Create a new stylesheet for the media queries. Check out my previous tutorial to see how media queries work.
<link href="media-queries.css" rel="stylesheet" type="text/css">
Viewport Smaller Than 980px (Fluid Layout)
For viewport narrower than 980px, the following rules will apply:
- pagewrap = reset width to 95%
- content = reset width to 60%
- sidebar = reset width to 30%
TIPS: use percentage (%) value to make the containers fluid.
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
Viewport Smaller Than 650px (One-Column Layout)
Next I have another set of CSS for viewport narrower than 650px:
- header = reset height to auto
- searchform = re-position the searchform to 5px top
- main-nav = reset the position to static
- site-logo = reset the position to static
- site-description = reset the position to static
- content = reset the width to auto (this will make the container to expand fullwidth) and get rid of the float
- sidebar = reset width to 100% and get rid of the float
@media screen and (max-width: 650px) {
#header {
height: auto;
}
#searchform {
position: absolute;
top: 5px;
right: 0;
}
#main-nav {
position: static;
}
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
#site-description {
margin: 0 0 15px;
position: static;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
#sidebar {
width: 100%;
float: none;
margin: 0;
}
}
Viewport Smaller Than 480px
The following CSS will apply if the viewport is narrower than 480px which is the width of the iPhone screen in landscape orientation.
- html = disable text size adjustment. By default, iPhone enlarges the text size so it reads more comfortably. You can disable the text size adjustment by adding
-webkit-text-size-adjust: none;
- main-nav = reset the font size to 90%
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
Flexible Images
To make the images flexible, simply add max-width:100%
and height:auto
. Imagemax-width:100%
and height:auto
works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9
for IE8.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Flexible Embedded Videos
To make the embedded videos flexible, use the same trick as mentioned above. For unknown reason, max-width:100%
(for embed element) doesn't work in Safari. The work around is to use width:100%
instead.
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
Initial Scale Meta Tag (iPhone)
By default, iPhone Safari shrinks HTML pages to fit into the iPhone screen. The following meta tag tells iPhone Safari to use the width of the device as the width of the viewport and disable the initial scale.
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Final Demo
View the final demo and resize your browser window to see the media queries in action. Don't forget to check the demo with the iPhone, iPad, Blackberry (newer versions), and Android phones to see the mobile version.
Summaries
-
Media Queries Javascript Fallback:
css3-mediaqueries.js is required to enable media queries for browsers that don't support media queries.<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
-
CSS Media Queries:
The trick for creating an adaptive design is to use CSS to override the layout structure based on the viewport width.@media screen and (max-width: 560px) { #content { width: auto; float: none; } #sidebar { width: 100%; float: none; } }
-
Flexible Images:
Use max-width:100% and height:auto to make the images flexible.img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
-
Flexible Embedded Videos:
Use width:100% and height:auto to make the embedded videos flexible..video embed, .video object, .video iframe { width: 100%; height: auto; }
-
Webkit Text Size Adjust:
Use -webkit-text-size-adjust:none to disable text size adjust on the iPhone.html { -webkit-text-size-adjust: none; }
-
Reset iPhone Viewport & Initial Scale:
The following meta tag resets the viewport and inital scale on the iPhone:<meta name="viewport" content="width=device-width; initial-scale=1.0">
相关推荐
This second edition of Responsive Web Design with HTML5 and CSS3 explains all the key approaches necessary to create and maintain a modern responsive design. The changing way in which we access the ...
party tools Executing media queries to benefit responsive designs Understand the basics of responsive workflow and boilerplate frameworks Improve performance of responsive web design Maintain ...
Responsive Web Design with HTML5 and CSS3 - Second Edition by Ben Frain HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone Style and approach This Learning Path course provides a ...
Apress, 2012 ... Chain CSS3 syntax with @media queries, filters and 3D transformations to create responsive animations with depth Provide animation to mobile devices without Flash or JavaScript
Responsive web design sounds incredibly simple. Opt for flexible grids for the layout, use flexible media (images, video, iframes ), and apply media queries to update these measurements to best ...
Media Queries (for responsive web design) CSS3 Backgrounds and Borders CSS3 Text CSS3 Fonts CSS3 Image Values and Replaced Content (gradients) CSS Multi-column Layout CSS Transforms CSS ...
- Understand how Responsive Web Design and CSS media queries work - Learn how the Sass stylesheet language and Compass framework support RWD - Adopt a mobile-first approach to RWD—and learn why it’s...
Media Queries — www.mediaqueri.es Foundation by Zurb — www.foundation.zurb.com Jetstrap — www.jetstrap.com Webflow — www.webflow.com Gridset — www.gridsetapp.com BrowserStacGridpak —...
Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)
respond.min.js是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。
该存储库包含使用的.NET联合培训课程。...里程碑和高级时间表第一周(HTML和CSS) - Html- CSS - styling - flexbox - box model- Responsive design- CSS Debugging- Media Queries第二周(JavaScript和算法) - DOM- ...
Hangman是一款适用于具有响应式Web设计的玩家的猜谜游戏,它使用jQuery和Media Queries使用HTML5,CSS3和JavaScript创建。 关于游戏: 玩家尝试在一定数量的猜测范围内通过建议字母来猜测单词。 要猜测的单词是一...
HTML5和CSS3, fontawesome的图标。 现场演示 入门 要在本地计算机上设置此项目,请按照以下简单步骤操作: 打开终端。 导航到所需的位置以下载此存储库的内容。 将以下代码复制并粘贴到终端中: git clone ...
该项目的主要目的是在学习CSS最重要的概念时促进学习。建于JavaScript,HTML和CSS现场演示入门您可以下载项目的压缩文件,将其解压缩,然后只需双击根文件夹中的index.html文件即可在默认浏览器中将其打开。 您也...
介绍在CSS中,通常的做法是为基于宽度的媒体查询中使用的布局断点指定名称,例如'mobile' , 'tablet' , 'desktop'或'sm' , 'md' , 'lg'轻松地引用它们,而不必记住确切的值。 通常,CSS断点会应用样式更改,这些...
可在滚动页面时增强用户体验响应屏幕尺寸技术性尽管没有一个成员拥有JS和后端开发方面的知识,但我们仍尽力仅使用HTML和CSS来创建一个内容丰富的网站。 在制作此网站的过程中,我们尝试了探索尽可能多HTML和CSS功能...
Chat_Bot ... JavaScript,HTML,CSS 响应式网页设计 移动优先方法 谁 我们的项目团队是: *前端开发人员-Simon Aerts(@SimonAertsBecode)。 *后端开发人员-AlexandreGarçao(@ alexg-rgb)。 *
eqio 元素/容器查询的一种简单,微小的替代方法 eqio可以让你获得响应Web开发/设计系统的圣杯:组件,可以根据自己的宽度,而不是浏览器的适应他们的风格。 它使用的幕后程序(因此在“好的”浏览器中,而在其他...