关于响应式布局

标签：

一.概念

Responsive Web Design（响应式布局）这个名词是Ethan Marcotte在2010年提出.简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上，屏幕比较宽，就可以一行放多个Div。到了手机上，或者Pad竖着拿的的时候，一行就只放1到2个Div就差不多了。这样在移动设备上,无论是字体大小还是页面布局就不会显得很局促.一切都是为了客户的体验度.

首先,要实现响应式布局,至少需要知道下面几个知识点

二、meta标签设置

下面的这段话在响应式布局里面必不可少

网页宽度调整

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1.0），即网页初始大小占屏幕面积的100%。

当然这里除了这两个属性之外,还可以加上其他几个属性,比较完整的是这个样子:

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

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上,minimum-scale=1.0当然就是禁止缩小了。user-scalable:是否可对页面进行缩放，no 禁止缩放

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要另外重写。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

这个js文件在google上获取困难的话,可以直接在github上搜索相关资源,大家需要的话可以点击这里直接下载

常见的一些其他meta标签设置

很多触屏版的页面上都会加上下面几句meta标签,虽然和响应式关系不是太大,这里一并说了吧

<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

• 第一个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
• 第二个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
  在web app应用下状态条（屏幕顶部条）的颜色；
  默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
  注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
• 第三个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

三.不使用绝对宽度和字体

不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

CSS代码不能指定像素宽度：

width:number px;

只能指定百分比宽度：

width: x%;

或者自动：

width: auto;

不使用绝对大小字体

只使用相对大小（em）字体，不能使用绝对大小（px）字体。下面这段代码的意思是：字体大小是页面默认大小的100%，即16像素；h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）；small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

body {
font: normal 100% Helvetica, Arial, sans-serif;
}
h1 {
font-size: 1.5em;
}

当然无论是绝对宽度还是字体还不止这些,但是这又涉及到另外的知识和布局方式,放在下一章讲解.

四.图片缩放

除了布局和文本，响应式布局还必须实现图片的自动缩放。这只要一行CSS代码，对于大多数嵌入网页的视频也有效。

img { max-width: 100%;}
img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

windows平台缩放图片时，可能出现图像失真现象。这是可以尝试针对IE浏览器内核写：

img { -ms-interpolation-mode: bicubic; }

一扯到IE就很头痛,但是既然已经要做响应式了,其实我个人的意见是还兼容IE干嘛?还在使用老式IE浏览器的用户,几乎也可以忽略掉了.有时间浪费在这上面,还不如多想想功能和页面设计.

前面这三个是响应式布局必须要遵守或者应用的方

关于响应式布局

标签：

原文地址：http://www.cnblogs.com/Qipahua/p/5032340.html