Responsive设计和CSS3 Media Queries的结合

Responsive这个词,这段时间公司老是在提,致使我大量的查找相关方面的资料学习。总算是能做出小小的东西出来,也让自己有点满足感。今天我想和大家一起来学习web designer wall的《Responsive Design with CSS3 Media Queries》教程。从这篇教程中,我们可以学会如休何使用CSS3的Media Queries属性来实现Responsive设计。

随着高科技的发展,现在我们浏览网页不在局限于PC机上了,用户可使用上网的设备是越来越多的品种:手机、小笔记本、iPad、Playbook,以及PC机,而且PC机的显展大小各不一致。这样一来不同的屏幕分辨率范围就产生了:320px至2560px不等。换句话说,以前我们那种固定布局的设计所受的局限性就越来越大了。为了能让我们制作出来的Web页面能适应这些设置,就需要一个适应性的设计,需要能自动调整,以适应所有显示分辨率和设备的布局。那么web designer wall的《Responsive Design with CSS3 Media Queries》教程中向我们展示如何使用CSS3的Media Queries来创建一个跨浏览器的Responsive设计。那么下面我们就一起开始吧。

目标效果

在开始之前,我们先来看一个DEMO效果,大家慢慢缩小你的显屏,你将会看到不同的布局效果来适应你的显屏大小:

更多的实例

如果你想浏览更多的这种效果的实例,可以点击:WordPress themesTisaEleminSucoiTheme2Funkimediaqueri.esMinblrWumblr等等。

概述

对于显屏大于1024px宽度来说,我们常常是将页面的容器设置为980px。其实我们可以使用CSS3Media Queries来检查浏览器可视窗口的大小。当显屏的可视窗口小于980px时,我们布局不在采用固定宽度而将采用流体宽度布局来替代;如果显屏可视窗口的宽度小于650px时,我们主内容宽度和边栏宽度都将变成全屏,并一列显示出来。如下图所示:

HTML Markup

下面我们主要来看上面DEMO中所使用的主体结构,有关于具体的代码,大家可以查看Demo:

    <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>
    	</di
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/responsive-design-with-css3-media-queries

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部