普通div+css改为响应式界面怎么写

方法1：使用已有的响应式网页框架，如bootstrap;

方法2：

a:声明页面viewport标签—-响应式页面的前提条件

<!--device指设备，initial-scale指打开的缩放比例，user-scalable指用户是否可以缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

b:使用响应式

/只是举例而已，max-width是在页面缩小到影响自身大小时，的最大宽度，但不会超过自身的原有宽度/
img{
    max-width:50%;/防止无限放大产生失真/
    }

c:使用流式布局 
布局元素使用浮动float或者行内块 inline-block; 
ps:个人建议使用行内块，第一不影响其余元素的布局，第二方便设置。

d:避免使用绝对尺寸（px等）,使用相对单位（如rem/em/%）; 
ps:这里科普一下，我们都知道em是根据 父级元素 字体的大小来计算的，而rem更狠是根据 根元素 的字体大小来计算，所以推荐使用rem，减少使用em计算的难度。。

f：使用CSS3 MediaQuery技术

三、响应式布局该怎么设计

那在我们的实际项目中应该怎么去设计呢在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的MediaQuery（媒介查询），这可是个好东西，易用、强大、快捷MediaQuery是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解MediaQuery。

当浏览器的分辨率小于1024px的时候，则通过MediaQuery预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据MediaQuery预设的层叠样式表来进行相对应的调整。看看我们的例子：

/当浏览器的可视区域小于980px/

@mediascreenand(max-width:980px){

#wrap{width:90%;margin:0auto;}

#content{width:60%;padding:5%;}

#sidebar{width:30%;}

#footer{padding:8%5%;margin-bottom:10px;}}

/当浏览器的可视区域小于650px/

@mediascreenand(max-width:650px){#header{height:auto;}

#searchform{position:absolute;top:5px;right:0;}

#content{width:auto;float:none;margin:20px0;}

#sidebar{width:100%;float:none;margin:0;}}

通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值：

/禁用iPhone中Safari的字号自动调整/

html{

---