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