移動端準備工作
name
="viewport"
content
="width=device-width, initial-scale=1.0,user-scalable=no"
>
+ 視口 viewport
- 布局視口：css所作用的區域，預設是980px;
- 可視視口：所看到的區域
- 完美視口/理想視口：將布局視口的寬和可視視口的寬設定為一樣 width=device-width
+ 引數
- width = device-width：寬度等於當前裝置的寬度
- initial-scale： 初始的縮放比例（預設設定為1.0）
- minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）
- maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）
- user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）
單位 vw(裝置寬度)/vh(裝置高度)
1vw = 裝置寬度的1% vh等同
10vw = 裝置寬度的10% vh等同
100vw = 裝置寬度的100% vh等同
根元素單位轉換
移動端布局
在設計圖裡正常測量，測量出來的結果是以px單位結尾的，我們寫**的時候要把這個px換算成rem，此時px和rem的比例就是1rem:100px
height:0.9rem;
混合布局(百分比+rem)
px
height:0.9rem;移動端響應式布局基礎
搭建乙個h5頁面，我們需要在head中新增乙個meta標籤 快捷鍵 meta vp tab鍵 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這...
移動端布局
預設以寬度為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 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...