移动端对于响应式设计而言，需要注意的地方。

1、响应样式的兼容性和优劣比较

能够兼容多个终端的设计模式 成为 响应式设计

通过在样式中添加 @Media属性来实现

优势：不同分辨率设备灵活性强，解决多设备显示适配问题

不足：兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间变长。

（先判断分辨率再选择css样式器，调用文件的原理：先下载，再解析，最后 再调用）

2、设计原理

应用CSS3的媒体查询（Media Queries），创建一个包含适应各种设备尺寸样式的CSS：

页面加载在特定的设备上，先检测设备的视口大小，然后加载特定于设备的样式，从而实现为不同的媒体类型，设定专有的样式表。

3、实现方式（第二种：style用的比较多）

⑴ link方式实现响应式设计，在页面中可以通过<link>标签的media属性为样式表指定设备类型。

<link rel="stylesheet" type="text/css" href="xxx.css"media="screen and (max-width:xxxpx)">

⑵ style样式实现响应式设计，在页面中还可以在样式表中追加媒体查询样式。

@media screen and (min-device-width:xxxpx) and (max-device-width: xxxpx) {
#content{
height：xxxpx;
}
}

⑶ 响应式图片，要实现图片在不同设备中的自动编写缩放效果，必须满足下列条件：

1、图片自动缩放到与其容器100%匹配。

2、设置图片的最大宽度max-width。

3、为不同的屏幕尺寸提供不同的图片。

⑷ iframe元素实现响应式布局，方法是使用一个名为FitVids的JQuery插件，代码如下：

<script type="text/javascript" scr="js/fitvids.js"></script>

<script type="text/javascript">

$(function(){

$("#content").fitVids();

});

</script>

⑸ 响应式设计推荐框架，BootStrap，Foundation都是非常不错的响应式设计框架。

4、移动端适配方案

⑴ 添加meta元素，设置屏幕的狂渎职和缩放比例。（针对不同设备端，编写添加meta元素）

<meta name="viewport"（meta属性名称：视口）

content=" width=device-width, initial-scale=1.0, maximum-scale=1.0">

（meta属性值） 页面宽 = 设备宽度 缩放比例为1.0 最大缩放值为1.0

   ⑵ <figure></figure>元素作用：把img标签括起来

    在style里面进行图片设置百分比宽度：100%

     <style type="text/css">

    figure img{

    width:100%;

    }

     </style>

     <figure>元素为h5新增元素  它与<div></div>等块元素 功能相一致，

但是对于网络爬虫而言 却比div更有优势：

如果使用figure元素，当被网络爬虫识别的时候，将会自动认为这里面是img标签图片，这样便于我们搜索与查找，有利于页面的解析。

⑶ 根据页面的可视宽度与背景图片的比例值，对整体页面的元素内容进行缩放（commen.js）

<script type="text/javascript">

function _page(){

var _dw = docunment.docunmentElement.clientWidth,

_sc = _dw / 640;

document.body.style.zoom = _sc;

}

//  拿到页面的分辨率  除以640 进行页面适应比例

//  zoom 根据_sc计算出的比例来调整设备页面的大小

window.onresize = function(){   //页面尺寸发生变化时，执行

_pages();

}

window.onload = function(){      //加载页面时，执行

_pages();

}

</script>

⑷ 除掉浏览器默认的边距值，将body元素设置为相对位置，便于绝对元素的参照。

*{

padding: 0px;

margin: 0px;

}

body{

position: relative;

font-size:1.5em;

}

⑸ 将封装的缩放功能函数用于页面加载和尺寸发生变化时执行，并将代码编写为JS文件，便于后续调用。

<script type="text/javascript" src="js/commen.js"></script>

⑹ 当需要点击图片img中的某一位置内容时，通过添加绝对定位的元素来实现点击事件的绑定。

#xxx{

position:absolute;

width: xxpx;

height: xxpx;

left: xxpx;

bottom: xxpx;

}

<div id="xxx"></div>

<figure><img src="xxx.jpg"></figure>

<script type="text/javascript">

//现将页面JS对象元素保存至变量中

var objBtn= document.getElementById("xxx"); //得到 id 为 xxx 的 页面元素

//后从缓存变量中取出元素对象， 并绑定相应事件

objBtn.addEventListener("click",function(){ //addEventListener() 方法用于向指定元素添加事件句柄

console.log("hello");

},false);

</script>

//相当于 点击图片上的某一个位置 （css样式） 继而执行该点击后的动作。