前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。
場景實戰這塊內容每個人的內容都不一樣。所以最近的更新基本都是我遇到並解決掉的問題。後期會把他們的內容貼地址。
今天我們要講什麼？
- flexible 適配方案
- flexible 適配方案（放大ios中的vConsole）
- flexible 適配方案遭遇放大手機字體大小
- 主流移動端適配方案（）
flexible 適配方案
flexible 是什麼
amfe/lib-flexible 是手淘的可伸縮佈局方案，學習的話可以點進去，都是中文的，我就不用複製了吧。
flexible 原理
它是把屏幕分成了10份，1份==1rem。如750/10=75。
之後在 <html> 標籤上增加 data-dpr屬性和 font-size樣式。然後我們就可以快樂的使用rem來基於根節點設置了。
flexible 注意事項
- 如果頁面有
viewprot他會使用頁面舊有的。 - flexible 設置了一個最大值（75），這樣出來在頁面中看到的效果就是居左750設計稿的樣式。
-
基於第二點，在部分曲面屏手機上或者大屏幕手機（三星 note8）上，會出現右邊出現大片空白。解決方案如下
- 單位改成vw。（其實就是換方案了，flexible官方也建議換了）
- 設置父級，然後居中。這樣就兩邊空白一樣了。基本可以接受。
flexible 適配方案（放大ios中的vConsole）
因爲默認 flexible 是根據系統縮放的。我們爲了測試方便，我們可以人爲設置一下<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">。
注意以上方案上線時記得去掉。否則部分小頁面會出問題。
flexible 適配方案遭遇放大手機字體大小
因爲我司歷史產品原因，有部分老年用戶（不說老年了，我爸也是調）。因爲手機字體太小，調節了手機的字體大小和字體縮放大小。
這就導致基礎值被異常的放大了，頁面顯示亂了。
修改系統字體大小的解決方案
- 客戶端設置（網上查的，因爲客戶端大哥不給改，且需要發版。所以我沒試）
-
vw方案，我不用字體大小還不行嗎？嗯，這個方案的確可以。 -
既然你放大了，那我給你縮小不就好了。
- 獲取所有標籤，然後給
font-size縮小。你別說，這個方案還真行。
但是這個方法太恐怖了。而且後續節點不可控 -
修改
flexible增加zoom的控制。嗯，完美解決。;(function(win, lib) { // 默認1:1 var zoom = 1; try{ // 構建一個真實的DOM var dom = document.createElement('vv-ln-test-fontsize'); // 設置爲一個理想值 dom.style.fontSize = '16px' // 追加到DOM樹中 document.head.appendChild(dom) // 獲取理想值和實際值的比例 zoom = 16/parseFloat(window.getComputedStyle(dom).fontSize); console.log(zoom, document.documentElement.style.fontSize) }catch(e){ console.log(e) } var vv_fontSizeZoom = lib.vv_fontSizeZoom || (lib.vv_fontSizeZoom = zoom); })(window, window['lib'] || (window['lib'] = {}));function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 750) { width = 750 * dpr; } var rem = width / 10 * lib.vv_fontSizeZoom;//計算值進行比例換算 docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }
- 獲取所有標籤，然後給
移動端適配方案
前端培訓-初級階段（9 -12） 之 移動端適配原理 rem（px、em、rem、%、vm）