响应式设计三部曲

随着智能手机的流行,响应式网页设计无疑成为了如今网页设计的大趋势。对于新手来时,响应设计听起来有点复杂,但它实际上是比你想象的更简单。只需下面的3个步骤即可构建一个响应式的网页!

1.Meta Tag

大多数移动浏览器扩展的HTML页面到宽视口宽度,以便在屏幕上适合。您可以使用viewport meta标签来重设此。下面的视口标签告诉使用该设备的宽度视口宽度和禁用初始规模浏览器。

<meta name="viewport" content="width=device-width, initial-scale=1.0">注:IE8或更低版本的IE可以引入如下语句让其支持
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

viewpoint说明

  • width 控制viewpoint的宽度,可以是固定值,也可以是device-width,即设备的宽度
  • height 高度
  • initial-scale 控制初始化缩放比例,1.0表示不可以缩放
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否可以缩放

可见如果不定义viewpoint的话,页面宽度以屏幕分辨率为基准,而设置以后可以根据设备宽度来调整页面,达到适配终端大小的效果

2.HTML页面结构

html代码为:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>响应式布局</title>
<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body>

<div id="pagewrap">

	<div id="header">
		<h1>Header</h1>
	</div>

	<div id="content">
		<h2>Content</h2>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
	</div>

	<div id="sidebar">
		<h3>Sidebar</h3>
		<p>text</p>
		<p>text</p>
	</div>

	<div id="footer">
		<h4>Footer</h4>
	</div>
</div>
</body>
</html>
3.设置css
<style type="text/css">

body {
	font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
	color: #669;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	font: bold 36px/100% Arial, Helvetica, sans-serif;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}
#header {
	height: 180px;
}
#content {
	width: 600px;
	float: left;
}
#sidebar {
	width: 300px;
	float: right;
}
#footer {
	clear: both;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}
	#sidebar {
		width: 30%;
	}

}

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}

}

/* border & guideline (you can ignore these) */
#content {
	background: #f8f8f8;
}
#sidebar {
	background: #f0efef;
}
#header, #content, #sidebar {
	margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
	border: solid 1px #ccc;
}

</style>


 

响应式设计三部曲,布布扣,bubuko.com

时间: 2024-10-07 00:57:14

响应式设计三部曲的相关文章

响应式设计

响应式设计 响应式设计的概念(三要素) 流体网格 响应式图片 媒体查询 相关概念 分辨率 是指显示器所能显示的像素的多少 像素密度 dpi/ppi 每平方英寸的像素数 设备像素比 dip/dpr 类似于每像素包含的点数(dppx) 视网膜屏幕 屏幕显示异常清晰(设备像素比大于1) viewport 定义 可视区域 移动端: 布局视口(大部分980px) /理想视口(视口宽度=设备宽度) 设置 <meta name="viewport" content="width=de

第一章 响应式设计之Media Quer

书里谈到尽量不要使用Media Queriy. 但是过多使用media query,会导致CSS变得脆弱和页面难以维护.一些方法可以减少页面使用 media query. 响应式设计: (1) 使用百分比替换固定的宽度.如果不行,也尽量使用vw, vh, vmin, vmax. (2) 使用max-width,而不使用width. (3) 对于一些元素,如img, object, video, iframe, 使用max-width: 100%. (4) 如果背景图片要完全覆盖容器,可以使用ba

响应式设计(一)

一.响应式设计(一)响应式设计初识,一个小小的demo,用来理解什么是响应式 今天的一个小小的demo,让我重新的认识了什么是响应式网页设计.我之前一直以为主要一个网页在不同的设备上浏览,网页可以自适应设备的屏幕大小,而不发生结构变形. 其实我觉得更准确去说是:根据不同的用户设备环境,页面可以做出不同的响应动作, 例如:在pc端浏览一行图片,看到的个数是4个,用手机看到的是2个图片,不同用户的设备环境,做出了不同的响应动作. 二.百度百科给出的概念: 响应式Web设计(Responsive We

响应式设计与自适应设计

响应式设计与自适应设计 相信从事前端页面设计的人都知道,页面呈现的效果及用户体验是非常重要的.当今社会移动设备的使用已超过了pc端,面对不同分辨率的设备,怎样做到页面体验的效果一样呢?这就成了最头疼的事情. 下面我们来看看响应式设计与自适应设计两者用法: 响应式Web设计(Responsive Web Design) :主要利用CSS3的媒介查询(Media Query)和Viewport来解决问题.通过媒介查询的设置,根据屏幕宽度.屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的

Responsive Design ------响应式设计

什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供 各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格.”从这一点描述来说,RWD不是流体布局,也不是网格布局, 而是一种独特的网页设计方法. 响应式设计要考虑元素布局的秩序,而且还需要做到“有求必应”,那就需要满足以下三个条件:网站必须建立灵活的网格基础:引用到网站的图片必须是可伸缩的:不同的显示风格,需要在Media Queries上写不同的样式. 要想

响应式设计的一些问题

在我们介入具体项目开发流程前,我们应该已经确认了自己产品所面向的内容消费群体,以及潜在目标用户,比如简单的只面向小屏幕的移动用户群或者我们要囊括所有的显示设备(mobile.pad.pc等等). 当我们确定目标用户的内容消费习惯的同时,我们应该也对他们的访问习惯.时段等等做一些初步分析.这不仅仅面向一个响应式站点,这对产品定位到开发都有决策作用. 在移动博客项目前期的产品分析中我们能看到,随着时代的前进用户内容的消费习惯也在发生着变化. 响应式产品设计 响应式设计是从产品角度来进行的设计,在这个

漫谈一下响应式设计网站

响应式设计中的界面设计 对于界面设计,我们以前针对桌面产品的设计可能就是一个尺寸的,每个模块的位置比较固定,但是在响应式设计中,这些东西就改变了,设计师会根据产品 的需要设计多个版本的设计,在这些不同的版本中,模块A在1024的宽度下,可能会是黑色背景,但是到了768下面可能会变成白色背景,实现了在不同宽度 的不同展现.这里面颜色.背景.宽高等都可改变,但是有一点我们需要注意的是 DOM 节点的顺序最好保持一致,因为在响应式设计的页面中,我们会使用流式布局,在固定版式通过绝对定位或者外边距负值的

致那些终将流行的响应式设计

如今,web应用已经深入到我们生活的方方面面了.而你知道吗?72%的用户们都希望他们访问的网站不仅在台式机或笔记本上有赏心悦目的界面,同时也能适应移动设备的屏幕.为此,身为设计师和工程师的我们必须紧抓这个潮流,走在前沿.达尔文教给世人最精准的四个字就是:适者生存.而响应式设计,凭借着其灵活可变的特性以及一些其他因素,必定会被越来越多的设计师青睐,成为未来web开发的一大主流设计模式. Ethan Marcotte,致力于推广响应式设计的先驱者,指出响应式设计基本上包括三大元素:流体网格,自适应的

自适应设计与响应式设计

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本.这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度. 于是,很早就有人设想,能不能"一次设计,普遍适用"