响应式设计

响应式设计

响应式设计的关键是：@media screen and (max-width:1476px){ }这个语句

可以查看下面的网址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

如果到达某种屏幕的宽度的时候，可用margin将其固定。

响应式设计有4种方法：

1、屏幕的缩小，可以适当的减少图片，例如一个div的原本的宽度是1400px的，你在里面放了5张图片，当屏幕缩小到990px时，你可以在里面放四张图片，这是一种方法，不过已被淘汰。

2、利用max-width这个语句，可以等比例的缩小图片，，但是如果两个div之间有空隙，你是很难做到他们之间的高度保持不变的，，所以对于复杂的页面这个不怎么适应。

3、当图片处于一个div中时，你可以使图片溢出的时候，图片出于中间，两边的隐藏，利用overflow：hidden这个语句，使图片出于中间的方法有2种：

       (1)、利用background这个语句：background: url(../images2/static/inxx-show/inxx_xshow-hd.png) no-repeat center;（这种方法常用）

       (2)、利用定位：<style type="text/css">

#out{height:100px; width:150px; position:relative; overflow:hidden;}

#mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;}

#in{ position:relative; top:-50%;}

</style>

<div id="out">

<div id="mid">

<div id="in">

<img src="http://i2.sinaimg.cn/blog/1/2008/0306/U2725P503T1D169F6DT20080822100708.jpg" />

</div>

</div>

</div>

在做响应式有时还会涉及到用js算，在这个过程中就会用到$(window).resize()这个函数，例如：

  $(window).resize(function(){

  if($(window).width() < 1583){

  //$(".m-list-brand").css("width",$(window).width()-200);

  //$(".list-brand").css("width",$(".m-list-brand").width()+40);

  }else if($(window).width() <= 1020){

  //$(".m-list-brand").css("width",800);

  //$(".list-brand").css("width",840);

  }else{

  //$(".m-list-brand").css("width",1400);

  //$(".list-brand").css("width",1440);

  }

  });

  $(window).resiz() //函数调用

4、利用bootstrap响应式框架，网址：http://www.bootcss.com/