移動式布局
1.移動裝置：手機和ipad
系統分：安卓系統和ios系統
安卓系統內建瀏覽器是谷歌，ios內建safari瀏覽器，他們的核心都是webkit，不需要考慮相容性，但安卓和ios系統還是有區別的；
2.布局（寫頁面）所考慮的東西
裝置寬度：就是裝置實際大小，裝置解析度，就是手機螢幕；
頁面大小：別人設計好的，我們把上面的內容實現；
瀏覽器視口（大小）：瀏覽器自帶的，（跟視窗沒有任何關係）；
瀏覽器的視口可通過 document.documentelement.clientwidth檢視，在移動端上裝置不做視口處理，一般預設的都是980
情景：裝置寬是320，頁面寬是1200px，瀏覽器視口為980，三者不統一！，怎麼能讓他們統一？（處理適配）
我們用移動裝置看頁面，瀏覽器的視口會自動縮放，以100%的完整的展示頁面，但是頁面不清楚，特別擠；
所以：我們需要把這移動裝置，瀏覽器的視口，頁面，變得統一（我們要做的）
1.移動裝置寬和瀏覽器視口的寬一致；
在head之間加乙個meta標籤
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
注意：裝置寬度和瀏覽器視口一致時，如果頁面的寬大於這個數字，就會出現滾動條
body的子級 width=100% 時，相當於瀏覽器視口的寬
2.當移動裝置和瀏覽器視口一致時，如果使用以前布局，如果頁面超過裝置寬，超過的部分就會被裁掉，所以，不能使用傳統的頁面開發模式，
可以使用彈性布局，流式布局（百分百布局），響應式布局，rem布局
頁面和裝置一致時，需要開發人員來搞
1.彈性布局：
1.分兩部分：彈性父級，彈性子元素；
2.給父級設定display:flex/inline-flex 相容性 display:-webkit-flex;
彈性父級可以設定的屬性：flex-direction：指定彈性盒子中子元素的排列方式；
屬性值：row(預設：右對齊) row-reverse(左對齊) column（從上到下） column-reverse（從下到上）
屬性：justify-countent 文字的對齊方式的屬性
屬性值：flex-start（左對齊） flex-end（右對齊） center（居中） space-between平均分布該行，沒有間隔； space-around 平均分布改行，兩邊有間隙；
屬性：align-items 專門調子元素行高位置； 常用的屬性值：center 居中
屬性：flex-wrap 子元素的換行方式， 常用屬性值：wrap
屬性：align-content 設定多行對齊： 屬性值：center 各行彈性容器向中間的位置堆疊
子元素上的 屬性：order 排列 屬性值：數字， 數字越小，排的越靠前；
子元素上的 屬性：flex 佔的份數 屬性值：數字， 代表他佔彈性父級的份數
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...