响应式 - Mr.小Y_H5之家 - 中国HTML5教程资源分享第一站

　　前端-响应式

1.什么是响应式设计？

　　响应式设计就是在网站开发过程中根据用户操作以及设备的环境进行相应的操作和布局，让网站针对不同系统平台、屏幕尺寸、屏幕定向等进行智能化调整，进行相对应的布局，如在pc端、iphone、Android、ipad，实现了在智能手机和平板电脑等多种智能移动终端浏览效果的流畅，防止页面变形，能够使页面自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备，并可在任一浏览终端进行网站数据的同步更新，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

2.响应式有什么优势？

　　响应式设计在面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题，可兼容多个智能移动浏览终端，并自动适应其屏幕尺寸，风格统一，增加网站辨识度，并且响应式网站所用的后台及数据库是统一的，即在电脑PC端编辑了网站内容后，手机、PAD等智能移动浏览终端能够同步显示修改之后的内容，网站数据的管理能够更加及时和便捷。提升网站技术品质，向用户提供友好的Web界面，能够更好地发掘潜在客户群体，给网站带来更多访问流量。

3.基本响应式

　　flex布局（1.设置父元素为弹性盒子，display：box。2.子元素划分区域box-flex：数值）

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式</title>
</head>
<style>
/*flex布局*/
*{
padding: 0;
margin: 0;
}
#row{

/*弹性自适应的盒子*/
display:-webkit-box;
height: 300px;
}
#left{
width: 400px;
height: 100px;
background: blue;
}
#center{
height: 200px;
line-height:200px;
background:green;
width: 200px;

/*划分区域*/

-webkit-box-flex:2;

}
#right{
height: 300px;
line-height:300px;
background: red;
width: 100px;
-webkit-box-flex:3;
}

</style>
<body>

<div>
<div>我爱你</div>/*固定宽高*/
<div>我爱你</div>/*编译器会查找有box-flex属性的元素，根据数值均分剩下的大小*/
<div>我爱</div>/**/
</div>
<div></div>

</body>
</html>