響應式布局是ethan marcotte在2023年5月份提出的乙個概念，簡而言之，就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。
響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
2-1.響應式布局是通過**查詢實現的
2-2.使用**查詢的三種方式 （與使用css的三種方式相結合來看）
2-2-1.直接在css中使用
@media 型別 （常選all/screen） and （條件1） and （條件2）
}2-2-3. 使用impot匯入，直接在url()後面使用空格，間隔**查詢規則；
@import url("css/02-響應式布局.css") all and (max-width:800px)";
2-3.舉個簡單的例子
2-3-1.
html檔案：
css檔案：
@media only screen and (min-width:900px )
.div1
.div2
}@media only screen and (max-width:900px )
.div1
.div2
}2-3-2執行結果：
當裝置寬度大於900px時
當裝置寬度小於900px時
html檔案：
css檔案1：
執行結果：
css檔案2：
執行結果：
css檔案3：
執行結果：
display:flex 具有彈性特性，
任何乙個容器都可以指定為flex布局。
webkit核心的瀏覽器，必須加上-webkit字首。
採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子 元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。
2-1，了解兩個基本概念
容器：需要新增彈性布局的父元素；
專案：彈性布局容器中的每乙個子元素，稱為專案
2-2，彈性布局的使用
給父容器新增display：flex/inline-flex；屬性，即可使容器內採用彈性布局顯示，而不遵循常規文件流的顯示方式；
容器新增彈性布局後，僅僅是容器內容採用彈性布局，而容器自身在文件流中的定位方式依然遵循常規文件流；
2-3，display：flex；容器新增彈性布局後，顯示為塊級元素；
display：inline-block； 容器新增彈性布局後，顯示為行級元素；
2-4，注意，設為 flex 布局以後，子元素的float、clear和vertical-align屬性將失效。但是position屬性依然生效。
①flex-direction屬性決定主軸的方向（即專案的排列方向）。
.box
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
②flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box
nowrap（預設值）：不換行，當容器寬度不夠時，每個專案會被擠壓
wrap：換行，並且第一行在容器最上方
wrap-reverse：換行，並且第一行在容器最下方
③flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
④justify-content屬性定義了專案在主軸上的對齊方式。（此屬性與主軸方向息息相關）
主軸方向為：row-起點在左邊，
row-reverse-起點在右邊，
column在起點上面
column-reverse-起點在下面
flex-start（預設值）：居於主軸的起點
flex-end：居於主軸的終點
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。（開頭和最後的專案與父容器之間的邊緣沒有間隔）
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
（開頭和最後的專案與父容器之間的邊緣有一定的間隔）
⑤align-items屬性定義專案在交叉軸上的排列方式。
.box
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。（line-height和font-size會影響每行的基線）
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度
⑥align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
（當專案換為多行時，可使用align-content替代justify-content）
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
前端布局（流式布局 響應式布局 彈性布局等）
自適應布局的特點是分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性 頁面元素位置發生改變 但在每個靜態布局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。1 布局特點 螢幕解析度變化時，頁...
自適應網頁 響應式布局 彈性布局
1.自適應網頁 1.宣告viewport元標籤 注 width device width 讓寬度為裝置寬度 initial scale 1 設定初始縮放比例 user scalable no 設定使用者是否可以手動縮放 2.使用流式布局 實現方案 float left display inline ...
響應式資料及彈性布局
響應式 設計 的理念集中建立頁面的排版大小，可以智慧型的根據使用者的行為以及使用裝置的環境 系統平台，螢幕尺寸，螢幕定向等 進行相對應的自適應布局。簡單來說就是 同一頁面在不同螢幕尺寸下有不同的布局。原理 動態的根據當前螢幕的寬度，動態的改變也買你盒子的寬度，盒子的顯示或者隱藏。html響應式布局實...