前端最基础的就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。场景战斗的内容因人而异。所以最近的更新基本都是我遇到和解决的问题。稍后，他们的内容将发布到该地址。我们今天要谈什么？灵活适配方案灵活适配方案（放大ios中的vConsole）灵活适配方案遇到放大手机字体大小主流移动端适配方案（）灵活适配方案灵活什么是amfe/lib-flexible是手机淘宝的可扩展布局方案，可以想学就点进去，都是中文的，不用我抄。flexible的原理是把屏幕分成10份，1份==1rem。比如750/10=75。然后在标签上添加data-dpr属性和font-size样式。那么我们就可以愉快的使用rem基于根节点进行设置了。灵活注意，如果页面有viewprot，它将使用页面的旧视图。flexible设置一个最大值（75），这样页面看到的效果就是左边750设计稿的样式。基于第二点，在部分曲面屏手机或大屏手机（三星note8）上，右侧会出现较大的空白区域。解决办法是把单位改成vw如下。（其实就是改方案，flexible官方也建议改）设置parentlevel，然后居中。这会在两边留下空白。基本可以接受。flexible适配方案（放大了ios中的vConsole）因为默认的flexible是根据系统缩放的。为了方便测试，我们可以人为设置.注意，当上面的方案上线的时候，记得去掉。否则，一些小页面会出问题。灵活适配方案遇到手机字体变大。因为我们公司的历史产品，有一些老年用户（别说老年了，我爸也调了）。由于手机字体太小，调整手机字体大小和字体缩放大小。这样就导致base值异常放大，页面显示乱七八糟。修改系统字体大小的解决办法是客户端设置（网上查了一下，因为客户端的大哥不会改，需要出版。所以没试）vw的解决办法，不行我没有使用字体大小？嗯，这个计划确实有效。既然你放大了，如果我为你缩小就好了。获取所有标签，然后缩小字体大小。别告诉我，这个计划真的管用。但是这个方法太可怕了。而且，后续节点无法控制修改flexible来增加缩放的控制。嗯，完美解决。;(function(win,lib){//默认1:1varzoom=1;try{//构建一个真正的DOMvardom=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)}varvv_fontSizeZoom=lib.vv_fontSizeZoom||(lib.vv_fontSizeZoom=zoom);})(window,window['lib']||(window['lib']={}));functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;如果（宽度/dpr>750）{宽度=750*dpr;}varrem=width/10*lib.vv_fontSizeZoom;//比例转换的计算值docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}移动端适配程序前端实训-初级阶段（9-12）移动端适配原理rem(px,em,rem,%,vm)参考淘宝灵活布局程序lib-flexible实践flexible.js布局详解flexible.js移动端自适应计划
