前端最基础的就是 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）
