前端-響應式 1.什麼是響應式設計？ 響應式設計就是在網站開發過程中根據用戶操作以及設備的環境進行相應的操作和佈局，讓網站針對不同系統平臺、屏幕尺寸、屏幕定向等進行智能化調整，進行相對應的佈局，如在pc端、iphone、Android、ipad，實現了在智能手機和平板電腦等多種智能移動終端瀏覽效果的 ...
前端-響應式
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>
<!-- flew 佈局 -->
<div id="row">
<div id="left">我愛你</div>/*固定寬高*/
<div id="center">我愛你</div>/*編譯器會查找有box-flex屬性的元素，根據數值均分剩下的大小*/
<div id="right">我愛</div>/**/
</div>
<div id="row1"></div>
</body>
</html>
