猫史档案馆

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）

RWD 能够以可变尺寸传递网页

RWD 对于平板和移动设备是必需的

<html>
	<head>
		<style>
			.city {
				float: left;
				margin: 5px;
				padding: 15px;
				width: 300px;
				height: 200px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<h1>响应式Web设计</h1>
		<h2>调整这个响应式页面的大小，你会发现期中的“奥妙”</h2>
		<br>
		<div class="city">
			<h2>London</h2>
			<p>London is the capital city of England.</p>
			<p>It is the most populous city in the United Kingdom,
				with a metropolitan area of over 13 million inhabitants.</p>
		</div>
          ·
          ·
          ·
	</body>
</html>

center_image

思考：

这只是一个简单的响应式设计，最关键的地方是CSS样式中的float（浮动），这个三个城市的<div>块都是浮动的，且都是向左浮动（向左靠齐），当你改变页面大小的时候，如果横排空间不够大，这些“浮动的”块就会被“挤下去”，但是呢，并不能真的做到适应屏幕，就像上面的动图一样，当更小的时候，城市名片就会被遮住一部分。所以我们一般用的是更好的响应式布局——Bootstrap（http://www.bootcss.com/）多学习，有好处的。

使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 H喵L, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	</head>
	<body>
		<div class="container">
			<div class="jumbotron">
				<h1>响应式Web设计</h1>
				<p>快来拖动我吧~~~</p>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-喵-4">
					<h2>London</h2>
					<p>London is the capital city of England.</p>
					<p>It is the most populous city in the United Kingdom,
						with a metropolitan area of over 13 million inhabitants.</p>
				</div>
				<div class="col-喵-4">
					<h2>Paris</h2>
					<p>Paris is the capital and most populous city of France.</p>
				</div>
				<div class="col-喵-4">
					<h2>Tokyo</h2>
					<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
						and the most populous metropolitan area in the world.</p>
				</div>
			</div>
		</div>
	</body>
</html>

center_image

思考：

Bootstrap里的这个响应式设计是利用了它的“栅格系统”（https://v3.bootcss.com/css/）有兴趣学习的可以多了解一下。这里在每一个<div>中都加上了class="col-喵-4"，这是因为山歌系统把网页俊峰成了十二列，col是列的意思，然后这三个<div>每一个都占据其中的4个，那么你无论怎么拖动，他们都是等分的，然后这里有一个喵指的是中等屏幕，所以当网页缩小到一定程度的时候就不在这个“喵”的范围了，所以就每一个<div>独占全部。

欢迎大家来分享学习~~

UPUP

猫史档案馆

【Y君学H喵L】第十六期·响应式Web设计

回复