【需求】根據元素個數不同，自動填充
【解決】flex布局
基本使用
.parent
.item1
.item2
移動端一般用的比較多的是混合彈性布局，如下需要固定，文字按比例縮放
混合彈性布局實現方式如下
水平垂直居中
flex布局還可以實現水平垂直居中，並且多次使用
.self-table-first-col
由於相容性，建議使用舊版flex布局，新舊版本屬性對比如下
【響應式布局】：在不同的寬度下載入不同的內容，開發乙個頁面，可以在pc,ipad,手機上都展示a. **查詢
例子
@media
(max-width
: 600px)
}
邏輯操作符
and在橫屏時應用這個，你可以使用 and 操作符合併**屬性
@media
(min-width
: 600px) and (
orientation
: landscape)
@media tv and (
min-width
: 600px) and (
orientation
: landscape)
**查詢中使用逗號分隔效果等同於or邏輯操作符,例如，如果你想在最小寬度為600畫素或是橫屏的手持裝置上應用一組樣式，你可以這樣寫：
@media
(min-width
: 600px), handheld and (
orientation
: landscape)
常用型別與引數
更多詳細內容在**查詢mdn
b. 設計點
百分比布局
彈性：設百分百，用乙個div包著，根據media響應式改變
重新布局，顯示和隱藏
c. 思考
高畫質移動web高畫質定義：這張圖多大就應該顯示多大，比如一張圖100100畫素，在高畫質螢幕上以100px100px顯示，因為縮放比為2，這張就會被拉大。為了避免產生模糊，的高寬應該用物理畫素單位渲染。即用100dp*100dp
一畫素邊框
1px在專案中的解決及原理
rem相對單位
為了適應各大螢幕的手機，px略顯固定，不能根據尺寸的大小而改變，使用相對單位更能體現頁面相容性。
em:根據父節點的font-size為相對單位em在多層巢狀之下難以實用，建議使用remrem:根據html的font-size為相對單位
【rem基礎值設定為多少比較好？】
為了適應各大手機
【建議font-size不要用rem】
因為字型是為了閱讀性
Web移動端布局
螢幕尺寸是指螢幕對角線的長度，單位為英吋，1英吋 2.54厘公尺 常見移動端裝置螢幕尺寸 iphone4 3.5英吋 iphone6,7,8 4.7英吋 iphone6,7,8 plus 5.5英吋 iphone5 4英吋 螢幕解析度是指橫縱方向上的畫素點數，單位為px，1px 1畫素點 常見移動端...
web移動端布局
對移動端適配不熟悉的同學，可以看看 使用flexible實現手淘h5頁面的終端適配 再聊移動端頁面的適配 如何在vue專案中使用vw實現移動端適配 vw 是什麼？vw viewport s width 簡寫，1vw 等於 window.innerwidth 的 1 vh viewport s hei...
前端移動web 布局 flex布局
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 總結 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex flow row wrap flex 屬性...