響應式布局

**查詢可以控制最大螢幕一行三個盒子，中等螢幕一行兩個盒子，小螢幕一行乙個盒子

width:33.3%

width:100%

@media screen and (min-width:400px) and (max-width:500px)

}    

//

內部的樣式**在滿足**條件的情況下才會執行

//

會根據media條件引用對應link

注意區分主軸和交叉軸。元素水平排列，則水平軸為主軸，垂直軸為交叉軸。

決定主軸是x軸還是y軸

父容器 display:flex;

需要給子元素設定寬度。

在父容器寬度不夠子元素的寬度和的時候，子元素會自動壓縮到適應父元素。 

例如，父div width:300px, 4個子div自動75px;

決定子元素在父元素中是否換行。

flex-direction和flex-wrap的簡寫方式

flex-flow: row wrap;//

以水平方式排列，要換行

如何處理？

1. 擴大子元素

2. 設定間距

在父物件中設定

justify-content:space-between；平均分布的效果。

作用：設定每個flex元素在交叉軸上的預設對齊方式

flex-start 位於容器開頭

flex-end 位於容器的結尾

center 居中顯示

作用：設定每個flex元素在交叉軸上的預設對齊方式

flex-start 位於容器開頭

flex-end 位於容器結尾

center 位於容器中心

space-between 子元素之間留有空白

space-around 子元素兩端留有空白

align-items和align-content的區別：

align-items將每一行當作獨立個體處理

align-contemt將多行當作整體處理

以下屬性在flex子元素中設定（之前的全是在父元素中設定）

flex-basis 設定彈性盒子伸縮基準值

flex-grow 設定彈性盒子的擴充套件比率

flex-shrink 設定彈性盒子的縮小比率

flex: flex-grow, flex-shrink,flex-basis的縮寫

flex-basis設定後，寬度將不再生效。

felx的值可以是px或百分比。

百分比：父元素的寬度的百分比。

例如：width:100px

flex-basis:30%;

最終寬度是父元素的30%

代表子元素伸縮的時候佔的份數。

例如：父元素寬度400px，

子元素1: flex-basis:50px; flex-grow:1;

子元素2: flex-basis:100px; flex-grow:4;

剩餘空間：400-50-100=250px（有剩餘空間才能談擴充）

子元素1，2按照1:4的比例去分這250px

子元素1最終寬度：50+250/5 *1 =100px

子元素2最終寬度：100+250/5 *4 = 300px

預設情況下：所有子物件成比例縮小

flex-shrink:0; 不准縮小

例如：父元素寬度400px，

子元素1: flex-basis:300px; flex-shrink:1;

子元素2: flex-basis:300px; flex-shrink:3;

剩餘空間：400-（300+300）=-200

子元素1，2按照1:3的比例去分剩餘空間

子元素1最終寬度：300+（-200）/4*1 = 250px

子元素2最終寬度：300+（-200）/4*3 = 150px

如果不設定flex-shrink，最終子元素1，2都是200px

flex: 1 1 300px

等於flex-grow:1;

flex-shrink:1;

flex-basis:300px

屬性作用

flex:auto

flex:1 1 auto

flex:none

flex:0 0 auto

flex:0%

flex:100px

flex:1 1 0%

flex:1 1 100px

flex:1

flex:1 1 0%

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...

響應式布局

裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...

響應式布局

首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...