?
目錄
01? 移動端的概述
02 移動端的視口標簽
03? 開發中的二倍圖
04 流式布局
05? 彈性盒子布局
01? 移動端的概述
? ? ? ? 移動端包括:手機 平板? 便攜式設備
? ? ? ? 目前主流的移動端開發:
? ? ? ? ? ? ? ? 安卓設備
? ? ? ? ? ? ? ? IOS設備
? ? ? ? 只要移動端支持瀏覽器? 那么就可以使用瀏覽器開發移動端項目
? ? ? ? 開發移動端? 使用html+css+js
? ? ? ? 在移動端? 讓同一個網頁在不同設備適配 要充分利用屏幕空間
? ? ? ? 寬度自適應:
? ? ? ? ? ? ? ? 流式布局? 百分比布局 伸縮布局
? ? ? ? 單位: rem
? ? ? ? 一套代碼 跨設備運行
? ? ? ? web前端開發移動端的技術/框架
? ? ? ? ? ? ? ? 1.html+css+js
? ? ? ? ? ? ? ? 2.vue.js
? ? ? ? ? ? ? ? 3.微信小程序
? ? ? ? ? ? ? ? 4.uniapp
? ? ? ? ? ? ? ? 5.react
? ? ? ? ? ? ? ? 6.angular
02 移動端的視口標簽
? ? ? ? 視口:(viewport)
? ? ? ? ? ? ? ? 在移動端網頁布局不是基于瀏覽器可視區域的寬度
? ? ? ? ? ? ? ? 而是基于一個虛擬的布局區域? 這就是視口 視口一般寬度默認是980
? ? ? ? 現在是移動互聯網時代 要能寫出基于手機屏幕寬度的網頁
? ? ? ? 在移動端開發之前 先把視口設置為當前屏幕的寬度
? ? ? ? content的值:
? ? ? ? ? ? ? ? width=device-width? 寬度設置為當前設備的寬度
? ? ? ? ? ? ? ? user-scalable=no? 控制用戶是否能夠縮放當前頁面 no表示不能
? ? ? ? ? ? ? ? initial-scale=1.0? 初始化縮放比例
? ? ? ? ? ? ? ? maximum-scale=1.0 最大縮放比例
? ? ? ? ? ? ? ? minimum-scale=1.0 最小縮放比例
? ? ? ? ? ? ? ? 多個值用逗號隔開
? ? ? ? 開發移動端頁面 必須設置視口標簽
????????
03? 開發中的二倍圖
????????
04 流式布局
? ? ? ? 針對移動端開發的布局方案:
? ? ? ? ? ? ? ? 1.流式布局? 百分比布局
? ? ? ? ? ? ? ? 2.flex彈性盒子布局
? ? ? ? ? ? ? ? 3.rem單位+媒體查詢
? ? ? ? ? ? ? ? 4.混合布局
? ? ? ? 流式布局比較重要的就是css屬性:
? ? ? ? ? ? ? ? 當前元素寬高百分比是按照父元素去計算的
? ? ? ? ? ? ? ? 但是在父元素寬高變化的時候需要規定變化的范圍
? ? ? ? ? ? ? ? max-width? min-width
? ? ? ? ? ? ? ? max-height? min-height
05? 彈性盒子布局
? ? ? ? 父元素叫做容器 子元素叫做項目
? ? ? ? 容器的六大屬性:
? ? ? ? ? ? ? ? flex-direction :? (項目在容器中的排列方式)
? ? ? ? ? ? ? ? ? ? ? ? row(默認值 ) 橫向排列
? ? ? ? ? ? ? ? ? ? ? ? row-reverse 橫向反轉排列
? ? ? ? ? ? ? ? ? ? ? ? column 縱向排列
? ? ? ? ? ? ? ? ? ? ? ? column-reverse 縱向翻轉排列
? ? ? ? ? ? ? ? flex-wrap : (如果在一根軸線下 放不下 元素是否換行)
? ? ? ? ? ? ? ? ? ? ? ? nowrap? (默認值) 不換行
? ? ? ? ? ? ? ? ? ? ? ? wrap? 一行放不下就換行
? ? ? ? ? ? ? ? ? ? ? ? wrap-reverse? 反轉換行
? ? ? ? ? ? ? ? flex-flow : (是flex-direction 和flex-wrap 的連寫)
? ? ? ? ? ? ? ? ? ? ? ? flex-flow: row nowrap
? ? ? ? ? ? ? ? justify-content : (定義項目在主軸(橫向)上面的對齊方式)
? ? ? ? ? ? ? ? ? ? ? ? flex-start(默認值) 主軸開始位置(一般是左側)
? ? ? ? ? ? ? ? ? ? ? ? flex-end 主軸結束位置(一般是右側)
? ? ? ? ? ? ? ? ? ? ? ? center? ?主軸中間位置
? ? ? ? ? ? ? ? ? ? ? ? space-between? 兩端對齊? 中間間隔一樣
? ? ? ? ? ? ? ? ? ? ? ? space-around? 項目兩端間距相等? ?相鄰項目間隔兩倍
? ? ? ? ? ? ? ? align-items :? (規定了項目在交叉軸上面的對齊方式)
? ? ? ? ? ? ? ? ? ? ? ? flex-start 交叉軸頂部對齊
? ? ? ? ? ? ? ? ? ? ? ? flex-end? 交叉軸底部對齊
? ? ? ? ? ? ? ? ? ? ? ? center? ?交叉軸中間對齊
? ? ? ? ? ? ? ? ? ? ? ? baseline? 項目和項目之間 文本基線對齊
? ? ? ? ? ? ? ? ? ? ? ? stretch (默認值)? 項目如果沒有設置高度 則高度占滿容器
? ? ? ? ? ? ? ? align-content : (項目如果有多根軸線? 那么多根軸線的對齊方式)
? ? ? ? ? ? ? ? ? ? ? ? flex-start? ?與交叉軸起點對齊
? ? ? ? ? ? ? ? ? ? ? ? flex-end? 與交叉軸底部對齊
? ? ? ? ? ? ? ? ? ? ? ? center? 交叉軸居中位置
? ? ? ? ? ? ? ? ? ? ? ? space-between? 上線兩端對齊? 中間間隔相等
? ? ? ? ? ? ? ? ? ? ? ? space-around 軸線與軸線之間的間隔相等 相鄰軸線之間的間隔是兩端間隔的兩倍?
? ? ? ? ? ? ? ? ? ? ? ? stretch (默認值)? 元素未設置高度 高度占滿當前軸線?
? ? ? ? 項目的六大屬性:
? ? ? ? ? ? ? ? order : 當前項目排列優先級? 默認值 值越小排列越靠前
? ? ? ? ? ? ? ? flex-grow : 當前軸線有剩余空間時 項目的放大比例 默認是0 不放大
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 按照每個項目定義的數值進行分配 0為不分配
? ? ? ? ? ? ? ? flex-shrink 不能換行
? ? ? ? ? ? ? ? ? ? ? ? 如果當前軸線剩余的空間不足以滿足每個項目的寬度或者高度
????????????????????????那么 默認的縮小比例 默認值是1 大家同比例縮
? ? ? ? ? ? ? ? flex-basis:
? ? ? ? ? ? ? ? ? ? ? ? 如果有剩余空間優先分配 basis的固定值
? ? ? ? ? ? ? ? ? ? ? ? 然后再分配設置 flex-grow 比例值? 默認值auto
? ? ? ? ? ? ? ? flex : grow shrink? basis 連寫
? ? ? ? ? ? ? ? align-self :?auto | flex-start | flex-end | center | baseline | stretch;
????????????????????????用來覆蓋父容器設置的algin-items屬性? ?單獨給當前項目設置交叉軸對齊方式
? ? ? ? ? ? ? ? ? ? auto 是默認值 表示按照父容器設置的algin-item生效? 其他值和父容器的值效果一樣
