01 “响应式Web设计”——概述

“响应式Web设计”的出现背景

        在很早之前（或者在目前也存在此情况），我们写出来的前端页面可能都还是固定宽度的，这种页面如果仅仅是在我们的笔记本电脑或者一般的台式机来加载浏览的话可能差别不是很大，虽然有较小的差别，但不太会超出我们的忍耐程度。但是呢，目前我们浏览网页的方式发生了巨大的变化，这就得益于各种浏览设备的出现了，例如：手机、平板、大比例展示屏……

        那如果固定宽度的页面加载在笔记本或者台式机里面产生的细小差别我们能忍受的话，网页一旦加载到手机或大屏设备上，此时产生的差别我们是绝对不能接受的。这时候就需要一种解决方法了：能够让同一网页能适配各种不同的浏览设备，即：可以在不同的浏览设备中可以呈现出不同的布局或功能。

“响应式Web设计”的提出

        此概念是国外的一位技术大牛在他的一篇文章中提出的，这篇文章运用了已经实现的三种技术（弹性网格布局、弹性图片/媒体、媒体查询）来提供了一个解决方案，此方案就是——响应式Web设计。

        如果非要给他一个定义的话，那就记住下面的文字吧：响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现出不同的样式。

学习“响应式Web设计”的技术基础

        响应式Web设计的学习并不需要很高的门槛，你只要有HTML5和CSS3的基础就可以学习。

“响应式Web设计”的代码结构

        此部分粘贴一份响应式Web设计的示例代码，其目的不是让你立即明白每一行的代码代表的含义，而是让你从整体上有一个认知——响应式“Web设计”的代码原来是这样写的，这就可以啦，废话不多说，我们先走马观花的看一下代码吧。

HTML部分：

	
		
		
		
		
		
	
	
		

			
			
Scones: the most resplendent of snacks
		
		

			
Occasionally maligned and misunderstood; the scone is a quintessentially British classic.
			

				
				
Incredible scones, picture from Wikipedia
			
		
		
Recipe and serving suggestions follow.
		

			
Ingredients
			

				
350g self-raising flour, and a little spare for dusting
				
¼ tsp salt
				
1 tsp baking powder
				
85g butter, cut into cubes
				
3 tbsp caster sugar
				
175ml milk
				
1 tsp vanilla extract
				
squeeze lemon juice (see Know-how below)
				
beaten egg, to glaze
				
jam and clotted cream, to serve
			
		
		

			
Method
			

				
Heat the oven to 220°C (or gas mark 7). Tip the flour into a large bowl along with the salt and baking powder, then mix it all up. Add the butter in, then rub the butter in with your fingers until the mix looks like fine crumbs. When that is done, stir in the sugar.
				
Put the milk into a jug and heat in the microwave for about 20-30 seconds. It should be warm but not hot. Add the vanilla and lemon juice to the milk and then put that to one side and but a baking tray in the oven to warm.
				
Make a well in the dry mix, then add the liquid and combine it quickly with a cutlery knife – it will seem pretty wet at first. Spread some flour onto the work surface and tip the dough out. Dredge the dough and your hands with a little more flour, then fold the dough over 2-3 times until it's smoother. Now pat it into a round shape about 4cm deep.
				
Take a 5cm cutter (Pro-tip – smooth-edged cutters tend to cut more cleanly, giving a better rise) and dip it into some flour. Plunge into the dough, then repeat until you have four scones. By this point you’ll probably need to press what's left of the dough back into a round to cut out another four.
				
Brush the tops with beaten egg, then place onto the hot baking tray.
				
Bake for 10 minutes until risen and golden on the top. Eat just warm or cold on the day of baking, generously (and I do mean generously) topped with jam and clotted cream. 
				
If freezing, freeze once cool. Defrost, then put in a low oven (about 160°C) for a few minutes to refresh.
			
		
	

CSS部分：

* {
	box-sizing: border-box;
}

body {
	padding: 1rem .5rem;
	font-size: 1.3rem;
	line-height: 1.2;
	max-width: 60rem;
	margin: 0 auto;
	color: #333;
}

img {
	max-width: 100%;
}

.Header {
	text-align: center;
	border-bottom: 8px double #f9f9f9;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
}

.Strap {
	font-size: 1rem;
}


.MoneyShot {
	position: relative;
}

.MoneyShotImg {
	border: 6px solid #e8cfa9;
	border-radius: 4px;
}

.LogoWrapper {
	display: block;
}

.ImageCaption {
	font-size: .75rem;
	position: absolute;
	bottom: .5rem;
	right: 1rem;
}

.IntroText {
	font-size: 1.8rem;
	font-style: italic;
}

.MethodWrapper li {
	padding: .4rem 0;
}

.MethodWrapper li:after {
	content: "✼";
	display: block;
	text-align: center;
	margin: 1rem 0 .5rem 0;
	color: #eee;
}

@media screen and (min-width: 50rem) {
	body {
		border-left: 4px solid #f9f9f9;
		border-right: 4px solid #f9f9f9;
		padding: 1rem 2rem;
	}

	.IntroWrapper {
		display: table;
		table-layout: fixed;
		width: 100%;
	}

	.MoneyShot,
	.IntroText {
		display: table-cell;
		width: 50%;
		vertical-align: middle;
		text-align: center;
	}

	.IntroText {
		padding: .5rem;
		font-size: 2.5rem;
		text-align: left;
		position: relative;
	}

	.Ingredients {
		font-size: .9rem;
		float: right;
		padding: 1rem;
		margin: 0 0 .5rem 1rem;
		border-radius: 3px;
		background-color: #ffffdf;
		border: 2px solid #e8cfa9;
	}

	.Ingredients h3 {
		margin: 0;
	}
}

        喜欢折腾的你可能忍不住了吧，马上就想把代码复制粘贴跑一下，但是还不行哦，我们需要准备两张图片去替换掉代码中引用的图片，这样的话就可以跑代码啦，我们可以换不同的设备来查看此页面的布局变化（最简单的就是改变浏览器的大小来查看），如图：

                                                                                        图 页面全屏下的样式

                                                                               图 浏览器宽度变小后的样式

        通过比对上面的两种布局，你是否对响应式设计有了大概的了解呢，我们就只写了一份HTML和CSS代码，但是他可以在不同的设备条件下显示不同的布局，是不是很神奇，哈哈，本文的任务完成了，就是让你对响应式设计有一个整体的认知。

总结

        此篇文章仅仅简单介绍了一下响应式Web设计的由来以及大概含义，因为本人在刚开始学习的时候查阅资料发现并没有一篇文章将此概念简单的介绍，一上来就是各种方法、各种步骤的操作介绍，让人没有一个整体的了解，哈哈，我这样说可能会招很多大佬的揍，在此请各位大佬高抬贵手啦。接下来的文章中会逐一介绍响应式Web设计涉及到的各个知识点，请各位关注呦