responsive designs

chen106106

于 2013-04-18 18:28:30 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS学习笔记文章标签： responsive css-media-query

本文链接：https://blog.youkuaiyun.com/chen106106/article/details/84420603

CSS学习笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种基于不同屏幕尺寸调整布局的响应式设计方案，并通过实例展示了如何使用CSS Media Queries实现三列网格布局的自适应变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

响应式布局主要用来当遇到不同屏幕大小的时候，我们的网页还可以以比较友好的方式显示给用户。主要有4中类型的屏幕，

1、宽屏的台式机

2、便携式的笔记本

3、平板电脑

4、智能手机

下图是不同设备中同一个网页的不同显示效果

响应式布局主要用到的css中media query，它可以判断当前屏幕的尺寸。

有关css media query 谷歌一下就可以找到详细资料

其他的就是根据不同屏幕宽度来实现我们的布局了。

常见的有导航栏的响应式布局，表格的自使用，图像的自适用，网格多列布局的自适应等。

下面我们来演示一个机遇多列布局的响应式布局。

当屏幕尺寸在 10em（160px）<width <42em（672px）时候，我们让第一列独占一行，

其他2列浮动，占据一行，同时设置它的字体大小和颜色（区分）

42em(672px0 ) <width < 55em(880px)

3列都浮动，同时宽度按照 2:1:1来分配

width > 75em (1200px)

3列都浮动，但我们把字体的大小设置大一点。

从上面的3副图片可以看出来，我们页面确实可以根据不同的屏幕大小来自使用显示内容了。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>grid responsive layout</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
		
		<style>

		/* 1st breakpoint - Float B and C, leave A full width on top */
		/* 1em=16px */
		@media all and (max-width: 42em) and (min-width: 10em)) {  /*672px*/
			.rwd-example {
				overflow: hidden; /* Use this or a "clearfix" to give the container height */
			}
			.rwd-example .ui-body {
			   min-height: 14em;
			}
			.rwd-example .ui-block-b,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 49.95%;
			}
			.rwd-example .ui-body {
			  font-size: 0.8em;
			  color: red;
			}
			
		}
	
		/* 2nd breakpoint - Float all, 50/25/25 */
		@media all and (min-width: 55em) { /*880px*/
			.rwd-example .ui-body {
			   min-height: 18em;
			}
			
			.rwd-example .ui-body {
			  font-size: 100%;
			  color: green;
			}
			.rwd-example .ui-block-a,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 50%;
			}
			.rwd-example .ui-block-b,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 25%;
			}
			
		}
	
		/* 3rd breakpoint - Bump up font size at very wide screens */
		@media all and (min-width: 75em) { /*1200px*/
			.rwd-example .ui-body {
			  font-size: 125%;
			  color: blue;
			}
			.rwd-example .ui-block-a,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 50%;
			}
			.rwd-example .ui-block-b,
			.rwd-example .ui-block-c {
			  float: left;
			  width: 25%;
			}
		}
		
		</style>
	</head>
	
	<body>
		<!-- data-role a:黑色 b：蓝色 c：白色 d:灰色  e：黄色 -->
		<div data-role="page">
			<div data-role="header">
				<h4>grid responsive layout学习</h4></div>
			<div data-role="content">
				
				<div class="rwd-example">
					<!-- Lead story block -->
					<div class="ui-block-a">
						<div class="ui-body ui-body-d">
							<h2>Apple schedules 'iPad Mini' event for October 23</h2>
							<p>One of the worst-kept secrets in tech has been confirmed: Apple will hold an event October 23 in San Jose, California, at which the company is widely expected to unveil a smaller, cheaper version of its popular iPad called "Mini".</p>
						</div>
					</div>
					<!-- secondary story block #1 -->
					<div class="ui-block-b">
						<div class="ui-body ui-body-d">
							<h4>Microsoft Surface tablet goes on sale for $499</h4>
							<p>The Microsoft Surface tablet picture has come into focus. The Redmond giant filled in the blanks on the new tablet's availability and specs.</p>
						</div>
					</div>
					<!-- secondary story block #2 -->
					<div class="ui-block-c">
						<div class="ui-body ui-body-d">
							<h4>AOL unveils Alto, an email service that syncs 5 accounts</h4>
							<p>AOL, struggling to shed its outdated image, is reimagining one of the most visibly aging parts of its platform: Its email service. </p>
						</div>
					</div>
</div><!-- /rwd-example -->
			</div>
		</div>
		
	</body>
</html>

参考： http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/grid-custom.html#

http://css-tricks.com/css-media-queries/

http://www.copyblogger.com/mobile-responsive-design-101/