HTML5响应式设计

响应式设计的设计原理是通过CSS3的Media Queries来调整页面元素在不同屏幕分辨率下的显示。

在大多数的响应式设计页面中，都会使用如下的meta标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 

　除此之外主要使用的是max-width,min-width等判断屏幕尺寸的特性以及orientation判断设备方向的特性

  @media screen and (max- 980px) { /*屏幕宽度小于内容主题时的样式*/}
  @media screen and (orientation: portrait) {/*纵屏时的样式*/}　　

 通过JavaScript侦听窗口改变事件resize

    $(window).resize(function () {
        var  width = $(window).width();// 获取当前屏幕的宽度
    });
    let isMobile = {
        Android:function () {
            return navigator.userAgent.match(/Android/i) ? true : false
        },
        BlackBerry:function () {
            return navigator.userAgent.match(/BlackBerry/i) ? true : false
        },
        iOS:function () {
            return navigator.userAgent.match(/IPhone|iPad/i) ? true : false
        },
        iPad:function () {
            return navigator.userAgent.match(/iPad/i) ? true : false
        },
        windows:function () {
            return navigator.userAgent.match(/IEMobile/i) ? true : false
        },
        any :function () {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.iPad() || isMobile.windows() )
        }
    };

　　响应式设计案列：

1，响应式设计列表

*{
	margin:0;
	padding:0;
}
body {
	background:#16A085;
	font-family:"Helvetica Neue", sans-serif;
	margin:4%;
}
h1{
	font-size:90px;
	color:rgba(255,255,255,.8);
	text-align:center;
	margin:50px auto;
}
#content{
	
}
#content article{
	25%;
	float:left;
	box-sizing:border-box;
	padding:2%;
	text-align:center;
	margin-bottom:25px;
}
#content article h1{
	font-size:36px;
	color:rgba(255,255,255,.9);
	margin:20px auto;
}
#content article p{
	color:rgba(255,255,255,.7);
}
#content article img{
	50%;
}
@media screen and (min- 768px) and (max- 979px) {
	#content article{
		50%;
		position:relative;
		text-align:left;
	}
	#content article img{
		20%;
		position:absolute;
	}
	#content article h1{
		margin:0 0 20px 30%;
		text-align:left;
	}
	#content article p{
		margin-left:30%;
	}
	#content article:nth-child(odd){
		clear:both;
	}
}
@media screen and (max- 767px) {
	#content article{
		50%;
	}
	#content article img{
		40%;
	}
	#content article:nth-child(odd){
		clear:both;
	}
}
@media screen and (max- 480px) {
	#content article{
		100%;
	}
}

<section id="content">
  <article>
    <img src="Calendar.png" alt="Calendar">
    <h1>Calendar</h1>
    <p>Duis vitae dapibus elit. Integer urna purus, convallis et magna ut, hendrerit molestie nisi. Morbi posuere sapien in dolor feugiat, lacinia sollicitudin justo vehicula. Proin quis pretium risus. </p>
  </article>
  <article>
    <img src="Clipboard.png" alt="Clipboard">
    <h1>Clipboard</h1>
    <p>Donec nisl lectus, euismod sit amet elementum id, tristique eu nulla. Integer vitae purus ut risus tincidunt scelerisque vitae nec dui. Quisque lobortis at augue nec finibus.</p>
  </article>
  <article>
    <img src="Mail.png" alt="Mail">
    <h1>Mail</h1>
    <p>Aliquam tempus faucibus metus vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
  <article>
    <img src="Pocket.png" alt="Pocket">
    <h1>Pocket</h1>
    <p>Aliquam consequat eleifend lacus, et molestie turpis volutpat nec. Pellentesque nulla diam, feugiat eu vestibulum porta, volutpat ac justo. Quisque in vehicula nisl. </p>
  </article>
</section>

　　

2，响应式内容图片

*{
	margin:0;
	padding:0;
}
body {
	background:#3498DB;
	font-family:"Helvetica Neue", sans-serif;
}
h1{
	font-size:56px;
	color:rgba(255,255,255,.9);
	margin:40px 0;
	padding-bottom:20px;
	border-bottom:1px solid rgba(255,255,255,.4);
}
p{
	font-size:18px;
	color:#FFF;
	line-height:1.4;
	margin-bottom:30px;
}
#content{
	padding:10px 8%;
}
img{
	float:left;
	margin:0 20px 20px 0;
	padding:10px;
	border:1px solid rgba(255,255,255,.6);
	background:rgba(255,255,255,.4);
	max-100%;
	box-sizing:border-box;
}
img.right{
	margin-left:20px;
	margin-right:0;
	float:right;
}
@media screen and (max- 1200px) {
	#content{
		padding:10px 8%;
	}
	img{
		calc(100% - 350px);
	}
}
@media screen and (max- 979px) {
	#content{
		padding:10px 5%;
	}
	img{
		50%;
	}
}
@media screen and (max- 767px) {
	#content{
		padding:10px 20px;
	}
	img{
		100%;
	}
}

　　

<section id="content">
<article>
<h1>Malesuada</h1>
<img src="p1.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros purus, suscipit finibus congue sit amet, fringilla eu arcu. Vestibulum pellentesque lacus vitae fermentum vulputate. Aliquam pharetra felis eu tempus imperdiet. Proin ultrices justo turpis, et fermentum sapien porttitor quis. Phasellus mauris enim, facilisis at purus vel, dignissim aliquet quam. Fusce quis nulla non tortor hendrerit congue. Cras convallis tellus a tortor malesuada placerat. Morbi et laoreet urna, id fringilla dui. Nunc a justo elit. Vivamus rhoncus, erat id aliquet tempus, leo nunc vulputate odio, quis lacinia velit felis a magna. In et arcu justo. Ut fermentum fermentum faucibus. Nulla sit amet placerat erat, eget tempor arcu. Praesent viverra nulla dictum nibh tincidunt, eget gravida elit lacinia. Aliquam semper malesuada sem eget tempus.</p>
<p>Morbi lectus ex, tempor at velit quis, consectetur suscipit ante. Etiam vehicula diam ac hendrerit tincidunt. Nullam rhoncus tellus eu urna rhoncus consectetur. Sed aliquam enim libero, pellentesque ultricies lorem sagittis eget. Duis quis nibh accumsan, tempus diam eget, posuere felis. Fusce aliquam feugiat velit, sit amet mollis felis eleifend varius. Mauris a metus vehicula, egestas nulla in, vestibulum arcu. Nam ac iaculis ex. Donec scelerisque lectus eget lectus ultrices semper. Proin in justo tristique, ultricies justo nec, faucibus dolor. Phasellus ultrices nec tortor eget aliquam. Donec a odio vel magna vestibulum vehicula. Nulla laoreet nibh urna, at pellentesque nisl iaculis a. Donec vitae purus ut nibh tristique fermentum sed non quam.</p>
</article>
</section>

　　

3，响应式背景

访问响应式的页面都加载相同的图片，这导致了一种尴尬的情况，图片过大，则移动端流量难以承受，图片过小，则桌面端效果就大打折扣。

使用js动态检测页面尺寸的变化，继而有针对性的匹配加载响应的图片

html, body{
	height:100%;
}
body {
	margin:0;
	padding:0;
}
#background{
	height:100%;
	background-position:50% 50%;
	background-size:cover;
}

<div id="background" data-bg-xl="2880x1800.jpg" data-bg-l="1200x750.jpg" data-bg-m="980x613.jpg" data-bg-s="768x480.jpg" data-bg-xs="480x300.jpg">

<script type="text/javascript">
$(document).ready(function() {
	var bg = $("#background");
	$(window).resize(function() {
		resizeBackground();
	});
	resizeBackground();
	function resizeBackground(){
		var winWidth = $(window).width();
		if (winWidth>1200) {
				bg.css("background-image", "url('"+bg.attr("data-bg-xl")+"')");
		} else if (winWidth>980) {
				bg.css("background-image", "url('"+bg.attr("data-bg-l")+"')");
		} else if (winWidth>768) {
				bg.css("background-image", "url('"+bg.attr("data-bg-m")+"')");
		} else if (winWidth>480) {
				bg.css("background-image", "url('"+bg.attr("data-bg-s")+"')");
		} else {
				bg.css("background-image", "url('"+bg.attr("data-bg-xs")+"')");
		}
	}
});
</script>

　　

4，响应式轮播图

*{
	margin:0;
	padding:0;
}
body {
	background:#7F8C8D;
	font-family:"Helvetica Neue", sans-serif;
	color:rgba(255,255,255,.8);
	text-align:center;
}
h1{
	font-size:42px;
	margin:30px auto;
}
#slideshow{
	980px;
	height:450px;
	overflow:hidden;
	margin:0 auto;
	position:relative;
}
#slideshow ul, #slideshow ul li, #slideshow-nav{
	list-style:none;
	position:absolute;
}
#slideshow-nav{
	100%;
	bottom:20px;
	text-align:center;
}
#slideshow-nav span{
	display:inline-block;
	border-radius:50%;
	15px;
	height:15px;
	font-size:0;
	background:rgba(255,255,255,.3);
	transition:all .5s;
	-webkit-transition:all .5s;
	margin:0 7px;
	cursor:pointer;
	user-select:none; /*使圆点不能被选中*/
	-webkit-user-select:none;
}
#slideshow-nav span.active{
	background:#FFF;
}
@media screen and (max- 979px) {
	#slideshow, ul, li, img{
		100%;
	}
}

　　

<h1>Slideshow component</h1>
<div id="slideshow">
  <ul>
    <li><img src="p1.jpg"></li>
    <li><img src="p2.jpg"></li>
    <li><img src="p3.jpg"></li>
    <li><img src="p4.jpg"></li>
  </ul>
  <div id="slideshow-nav"></div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var duration = 3000; //每张图片的持续显示时间
		var speed = 1000; //图片切换的动画时间
		var width = $('#slideshow').width(); //获得单张图片的宽度
		var curIndex = 0; //设置当前显示图片的索引值
		var totalIndex = $('#slideshow > ul > li').length; //获得总的图片数量
		var timer; //设置一个计时变量
		$('#slideshow > ul > li').each(function(index) {
			$(this).css("left", index*width+"px"); //设置轮播图片的横向排列
			$('#slideshow-nav').append("<span>"+(index+1)+"</span>"); //在导航中添加相应的节点
    });
		$('#slideshow-nav > span').each(function(index) {
			$(this).attr("index", index); //存储每个节点的索引值
			$(this).click(function(){ //当span元素被点击时
				curIndex = $(this).attr("index")-1; //刷新当前显示图片的索引值
				clearTimeout(timer); //清除计时
				move(); //重新执行move函数以显示该图片
			});
    });
		$('#slideshow-nav > span').eq(0).addClass("active"); //设置第一个圆点为active
		var firstChild = $('#slideshow > ul > li').eq(0).clone(); //将第一张图片复制一份
		$('#slideshow > ul').append(firstChild); //将该图片添加到列表最末
		firstChild.css("left", totalIndex*width+"px"); //将复制的第一张图片显示在图片序列最右侧
		function move(){
			curIndex++; //使索引值加以1
			if(curIndex>totalIndex){ //当索引值大于图片总数时
				curIndex = 1; //表示当前应播放第2张图片
				$('#slideshow > ul').css("left", "0px"); //将图片序列重置到原点
			}
			for(var i=0; i < totalIndex; i++){
				$('#slideshow-nav > span').eq(i).removeClass("active"); //清除所有导航节点的active类
			}
			if(curIndex === totalIndex){
				$('#slideshow-nav > span').eq(0).addClass("active"); //如果当前索引值等于图片总数，则说明当前正显示第一张图片的副本，因此应激活第一个导航节点
			}else{
				$('#slideshow-nav > span').eq(curIndex).addClass("active"); //在其余情况下，则为当前导航节点添加active类
			}
			$('#slideshow > ul').animate({left:width*curIndex*-1+"px"},speed); //为图片序列创建动画
			timer = setTimeout(move,duration+speed); //设置延迟一定时间后执行move函数，延迟时间等于动画时长加上每张图片的持续显示时间
		}
		timer = setTimeout(move,duration); //设置延迟一定时间后执行move函数，延迟时间等于每张图片的持续显示时间
		$('#slideshow').css("height", $('img').height()+"px");
		$(window).resize(function() {
        width = $('#slideshow').width();
				$('#slideshow').css("height", $('img').height()+"px");
				$('#slideshow > ul > li').each(function(index) {
					$(this).css("left", index*width+"px"); //设置轮播图片的横向排列
				});
				$('#slideshow > ul').stop().animate({left:width*curIndex*-1+"px"},0);
    });
	});
	
</script>

　　5，响应式菜单

@font-face {
	font-family: 'icon-font';
	src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
}
*{
	margin:0;
	padding:0;
}
body {
	background:#FFF;
	margin:5%;
	font-family:"Helvetica Neue", sans-serif
}
#page-nav{
	position:relative;
}
#page-nav ul li{
	display:block;
	float:left;
	16.66%;
}
#page-nav ul li a{
	display:block;
	text-align:center;
	text-decoration:none;
	color:#FFF;
	font-size:1.2em;
	line-height:4em;
}
#page-nav ul li:nth-child(1) a{
	background:#1ABC9C;
}
#page-nav ul li:nth-child(2) a{
	background:#2ECC71;
}
#page-nav ul li:nth-child(3) a{
	background:#F1C40F;
}
#page-nav ul li:nth-child(4) a{
	background:#E67E22;
}
#page-nav ul li:nth-child(5) a{
	background:#E74C3C;
}
#page-nav ul li:nth-child(6) a{
	background:#9B59B6;
}
#page-nav ul li a:hover{
	background:#333;
}
#page-nav ul li:nth-child(1) a::before{
	content:"e62e";
}
#page-nav ul li:nth-child(2) a::before{
	content:"e62a";
}
#page-nav ul li:nth-child(3) a::before{
	content:"e631";
}
#page-nav ul li:nth-child(4) a::before{
	content:"e644";
}
#page-nav ul li:nth-child(5) a::before{
	content:"e62d";
}
#page-nav ul li:nth-child(6) a::before{
	content:"e629";
}
#page-nav ul li a::before{
	font-family: 'icon-font';
	margin-left:-1em;
	margin-right:1em;
}
#menutoggle{
	display:none;
}
#page-nav-list{
	display:block;
}
@media screen and (min- 1200px) {
	/**/
}
@media screen and (min- 768px) and (max- 979px) {
	#page-nav ul li a::before{
		display:block;
		margin:0 auto;
		line-height:1;
		padding-top:2em;
	}
}
@media screen and (max- 767px) {
	#page-nav ul li a::before{
		font-size:20px;
		margin:0;
		line-height:80px;
	}
	#page-nav ul li a{
		font-size:0;
		height:80px;
	}
}
@media screen and (max- 480px) {
	#menutoggle{
		display:block;
		100%;
		height:60px;
		border:none;
		background:none;
		text-align:left;
		text-indent:60px;
		font-size:1.5em;
		color:#FFF;
		position:relative;
		cursor:pointer;
		background:#000;
	}
	#menutoggle::after{
		content:'';
		22px;
		position:absolute;
		left:20px;
		top:10px;
		box-sizing:border-box;
		padding:0;
		box-shadow: 0 10px 0 2px #FFF,0 20px 0 2px #FFF,0 30px 0 2px #FFF;		
	}
	#menutoggle.active + ul{
		display:block;
	}
	#page-nav-list{
		display:none;
		position:absolute;
		100%;
	}
	#page-nav ul li{
		100%;
	}
	#page-nav ul li a{
		text-align:left;
		font-size:1.2em;
		text-indent:3.5em;
	}
	#page-nav ul li a::before{
		position:absolute;
		left:-2em;
	}
}

　　

<nav id="page-nav">
  <ul id="page-nav-list">
    <li><a href="" id="home">Home</a></li>
    <li><a href="" id="photo">Photo</a></li>
    <li><a href="" id="user">User</a></li>
    <li><a href="" id="document">Document</a></li>
    <li><a href="" id="chat">Chat</a></li>
    <li><a href="" id="video">Video</a></li>
  </ul>
</nav>

　　

var nav = document.getElementById('page-nav');
var navlist = document.getElementById('page-nav-list');
nav.insertAdjacentHTML('afterBegin','<button id="menutoggle">Menu</button>');
var menutoggle = document.getElementById('menutoggle');
menutoggle.onclick = function() {
	
	if(window.getComputedStyle(navlist).display === "none"){
		menutoggle.className = "active";
	}else{
		menutoggle.className = "";
	}
}