一、
打開Apache服務(wù)器--將手機(jī)連到電腦開啟的360WiFi--訪問目錄--手機(jī)掃二維碼或者輸入IP地址（http://10.0.153.186/es6/touch.html）
布局視口設(shè)為當(dāng)前設(shè)備屏幕的寬度，讓網(wǎng)站能夠良好的適應(yīng)移動端窗口。
布局方式分為：自適應(yīng)布局（viewpoint）、響應(yīng)式布局（媒體查詢）、流式布局、table布局、彈性布局。。。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
二、
WEB VR
彈性布局 應(yīng)用的技術(shù)是flex
FLEX PC端的flex無法向下兼容，適用于移動端（autoprefixer插件解決兼容問題）
容器屬性
display:flex
應(yīng)用于容器，其子元素是項目。
核心理念： 讓容器有能力改變項目的寬度和高度，讓其均勻的分布在容器中。
項目默認(rèn)延主軸排列。
flex-wrap : nowrap| wrap | wrap-reverse
指定項目是否換行
wrap: 換行，正序排列
nowrap:不換行，默認(rèn)值
wrap-reverse:換行 行倒序排列
flex-direction : row | row-reverse | column | column-reverse
決定主軸方向
row : 默認(rèn)水平方向（從左向右）
row-reverse : 水平方向 （從右向左）
column : 垂直方向（從上向下）
column-reverse : 垂直方向（從下到上）
縮寫形式
flex-flow : flex-wrap flex-direction;
flex-flow : wrap row;
justify-content：flex-start | center | flex-end | space-around | space-between
決定項目在主軸上的對齊方式
flex-start : 沿左側(cè)對齊（一下屬性以默認(rèn)從左向右為例）
center : 沿中間對齊
flex-end : 沿右側(cè)對齊
space-around : 均勻分布（項目兩側(cè)留白相等）
space-between : 項目靠兩側(cè)對齊
align-items : flex-start | flex-end | center | stretch | baseline
決定項目沿交叉軸的對齊方式（以默認(rèn)從上到下為例）
flex-start : 沿上方對齊
flex-end : 沿下方對齊
center : 沿中間對齊
baseline：沿文字基線對齊
stretch：默認(rèn)值 填滿整個交叉軸空間
align-content：flex-start | flex-end | center | space-around | strtch
決定多根軸線沿交叉軸的對齊方式（只有換行產(chǎn)生多根軸線時才有效）
flex-start : 沿交叉軸起點(diǎn)對齊
flex-end : 沿交叉軸結(jié)束點(diǎn)對齊
center : 沿交叉軸中間對齊
space-between : 沿交叉軸兩側(cè)對齊
space-around : 沿交叉軸均勻分布（留白相等）
stretch : 填滿整個交叉軸空間
項目屬性
flex-grow : [number]
決定項目放大比率（填滿主軸剩余空間）
number : 數(shù)值 默認(rèn)為0，值越大，放大比率越大
flex-shrink : [number]
決定項目縮小比率
number ：數(shù)值 默認(rèn)為1 自動縮小，值越大，縮小比率越大
flex-basis : auto | pixel | percent
決定項目放大縮小的基準(zhǔn)值
auto：使用項目本身大小計算比率
pixel：使用指定的像素值
percent：使用指定的百分比 100% 當(dāng)wrap時 項目會占容器的整個寬度；當(dāng)nowrap時，項目會占容器主軸剩余的寬度（其他放大無效）
align-self ：flex-start | center | stretch | baseline | flex-end
決定項目自身的對齊方式（相對于交叉軸）
order ：[number]
決定項目的順序，值越小，越靠前，可接受負(fù)值
table布局
可以解決自適應(yīng)問題，應(yīng)用于后臺管理系統(tǒng)、OA...
display:table;
display：table-cell;單元格，自動補(bǔ)display：row和display：table;
column
column-width:400px;
column-count: 5;
columns:400px;
column-gap:50px;欄間距
column-rule:2px dashed red;
