資訊專欄INFORMATION COLUMN
摘要：前端最基礎(chǔ)的就是。默認(rèn)構(gòu)建一個真實的設(shè)置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓(xùn)初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應(yīng)方案
前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識的中心思想，我們開課啦（每周四）。
場景實戰(zhàn)這塊內(nèi)容每個人的內(nèi)容都不一樣。所以最近的更新基本都是我遇到并解決掉的問題。后期會把他們的內(nèi)容貼地址。
今天我們要講什么？flexible 適配方案
flexible 適配方案（放大ios中的vConsole）
flexible 適配方案遭遇放大手機字體大小
主流移動端適配方案（）
flexible 適配方案 flexible 是什么amfe/lib-flexible 是手淘的可伸縮布局方案，學(xué)習(xí)的話可以點進去，都是中文的，我就不用復(fù)制了吧。
flexible 原理它是把屏幕分成了10份，1份==1rem。如750/10=75。
之后在 標(biāo)簽上增加 data-dpr屬性和 font-size樣式。然后我們就可以快樂的使用rem來基于根節(jié)點設(shè)置了。
如果頁面有 viewprot 他會使用頁面舊有的。
flexible 設(shè)置了一個最大值（75），這樣出來在頁面中看到的效果就是居左750設(shè)計稿的樣式。
基于第二點，在部分曲面屏手機上或者大屏幕手機（三星 note8）上，會出現(xiàn)右邊出現(xiàn)大片空白。解決方案如下
單位改成vw。（其實就是換方案了，flexible官方也建議換了）
設(shè)置父級，然后居中。這樣就兩邊空白一樣了。基本可以接受。
flexible 適配方案（放大ios中的vConsole）因為默認(rèn) flexible 是根據(jù)系統(tǒng)縮放的。我們?yōu)榱藴y試方便，我們可以人為設(shè)置一下。
注意以上方案上線時記得去掉。否則部分小頁面會出問題。
因為我司歷史產(chǎn)品原因，有部分老年用戶（不說老年了，我爸也是調(diào)）。因為手機字體太小，調(diào)節(jié)了手機的字體大小和字體縮放大小。
這就導(dǎo)致基礎(chǔ)值被異常的放大了，頁面顯示亂了。
客戶端設(shè)置（網(wǎng)上查的，因為客戶端大哥不給改，且需要發(fā)版。所以我沒試）
vw 方案，我不用字體大小還不行嗎？嗯，這個方案的確可以。
既然你放大了，那我給你縮小不就好了。
獲取所有標(biāo)簽，然后給 font-size 縮小。你別說，這個方案還真行。
但是這個方法太恐怖了。而且后續(xù)節(jié)點不可控
修改 flexible 增加 zoom 的控制。嗯，完美解決。
;(function(win, lib) {
// 默認(rèn)1:1
var zoom = 1;
try{
// 構(gòu)建一個真實的DOM
var dom = document.createElement("vv-ln-test-fontsize");
// 設(shè)置為一個理想值
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;
}
移動端適配方案
前端培訓(xùn)-初級階段（9 -12） 之 移動端適配原理 rem（px、em、rem、%、vm）
參考文獻淘寶彈性布局方案lib-flexible實踐
flexible.js 布局詳解
flexible.js 移動端自適應(yīng)方案
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/55061.html
摘要：前端最基礎(chǔ)的就是。默認(rèn)構(gòu)建一個真實的設(shè)置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓(xùn)初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...
摘要：前端最基礎(chǔ)的就是。默認(rèn)構(gòu)建一個真實的設(shè)置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓(xùn)初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...
摘要：前端最基礎(chǔ)的就是。數(shù)據(jù)被編碼為鍵值對。大法好，精準(zhǔn)識別，也算是正確的表單提交。全局的默認(rèn)值實例默認(rèn)值創(chuàng)建實例時設(shè)置配置的默認(rèn)值在實例已創(chuàng)建后修改默認(rèn)值攔截器，可以攔截錯誤，進行上報。參考資料類型看云 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水...
摘要：前端最基礎(chǔ)的就是。數(shù)據(jù)被編碼為鍵值對。大法好，精準(zhǔn)識別，也算是正確的表單提交。全局的默認(rèn)值實例默認(rèn)值創(chuàng)建實例時設(shè)置配置的默認(rèn)值在實例已創(chuàng)建后修改默認(rèn)值攔截器，可以攔截錯誤，進行上報。參考資料類型看云 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水...
閱讀 2117·2023-04-26 00:50
閱讀 2488·2021-10-13 09:39
閱讀 2221·2021-09-22 15:34
閱讀 1613·2021-09-04 16:41
閱讀 1343·2019-08-30 15:55
閱讀 2441·2019-08-30 15:53
閱讀 1714·2019-08-30 15:52
閱讀 754·2019-08-29 16:19
