移动端页面布局经验谈

逃离我推掉我的手 2022-11-30 04:08 235阅读 0赞

介绍移动端布局常用方法之前，推荐回顾一下这3篇博文。  
[移动端布局-分辨率和视口][-]  
[网页的响应式布局与媒体查询][Link 1]  
[一步步学习Flex弹性布局][Flex]

在做移动端布局时，html的header中加上这段代码

手机设备的默认的viewport是layout viewport，通常是980px,通过修改这个值来完成移动的适配，这样做是将layout viewport的宽度设置为 ideal viewport的宽度，指定页面的初始缩放比例为不缩放，不允许用户缩放视口。

### 响应式布局和媒体查询 ###

移动端布局时，首先要确认一下需求，即是否需要兼容PC端，即两端适配，这是移动端布局的比较麻烦的情况，这时候我通常用响应式布局和媒体查询来做。  
通常设计稿不可能涵盖所有的设备的screen，如只有pc和移动两种设计稿，而设备的屏幕宽度却有很多种，前端需要尽可能的列举一些设备屏幕的宽度，针对不同设备的屏幕宽度来分别设置样式。

对于pc端页面整体宽度给一个固定像素宽度，pc端布局参考静态布局。  
移动端设置宽度100%，UI提供的移动端设计稿通常是750像素的宽度，也即是假定2倍屏，页面布局时元素盒子使用百分比做单位，文字的大小要除以2。这样做有一个弊端，就是对于比较大屏幕的移动设备，文字会显得比较小，可以通过媒体查询来解决。

> 常见的设备类型和宽度  
> 超小屏幕 手机 (<768px)  
> 小屏幕 平板 (≥768px)  
> 中等屏幕 桌面显示器 (≥992px)  
> 大屏幕 大桌面显示器 (≥1200px)

基本思路是这样的，具体执行的时候，需要比较多的调试，对此，只能跟战友们说加油了！  
这里有个小技巧，可以在超小屏幕的范围内，通过设置html的font-size属性，确定这种宽度下一个rem代表多少像素，再用rem相对单位来定义页面中各元素的大小，实现在移动端较好的适配。  
如：

@media (min-width: 360px) { 
        html{ 
        font-size: 10px;
      }
    }
    @media (min-width: 414px) { 
        html{ 
        font-size: 14px;
      }
    }
    @media (min-width: 414px) { 
        html{ 
        font-size: 14px;
      }
    }
    @media (min-width: 768px) { 
        html{ 
        font-size: 14px;
      }
    }

### 使用lib-flexible插件与flex布局 ###

目前在前端布局中强制要求两端适配的情况实际不多，原因有很多，但基本是3个方面，- - 用户体验不是最优

*  UI设计难度较大
 *  阻碍前端技术的发挥，特别是前后端分离后，pc端和移动端页面分离并不会增加后端的工作量…大家都懂的，项目开发中，后端是嘴大的那个。

移动端布局的最优效果是网页在不同设备上的展示效果就像等比例缩放设计稿一样，对设计稿最真实的还原。

这时候需要一个神器：lib-flexible

##### lib-flexible.js #####

lib-flexible是阿里团队解决移动端适配问题的开源库，目前lib-flexible已经停止维护，替代的方案是amfe-flexible,也称为lib-flexible-2.0

代码如下：

(function flexible (window, document) { 
      var docEl = document.documentElement
      var dpr = window.devicePixelRatio || 1
    
      // adjust body font size
      function setBodyFontSize () { 
        if (document.body) { 
          document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else { 
          document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit () { 
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
      }
    
      setRemUnit()
    
      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', function (e) { 
        if (e.persisted) { 
          setRemUnit()
        }
      })
    
      // detect 0.5px supports
      if (dpr >= 2) { 
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) { 
          docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
      }
    }(window, document))

*  lib-flexible-2.0把屏幕分成10份数，html的font-size是屏幕的1/10宽，这样1rem就是屏幕的1/10,屏幕的总宽度是10rem  
    如:750px宽的设计稿，布局时75px=1rem，用这个公式来计算其他尺寸就可以了，这样做是不是有点棒，也有点烦，不要紧，有很多方式可以帮我们转换，如后面推荐的蓝湖，后者其他插件。
 *  lib-flexible-2.0检测浏览器是否支持0.5px的特性，通过添加类名hairlines解决CSS移动端1px边框问题。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <script src="./lib-flexible-2.0/index.js"></script>
        <title>移动端布局</title>
        <style> .container{ width: 100%;display: flex;justify-content: center} button{ width: 5rem;height: 1.5rem;font-size: 1rem;border:1px solid #000} </style>
    </head>
    <body>
    <div class="container">
        <button>button</button>
    </div>
    </body>
    </html>

##### Flex弹性布局 #####

前面我们学习了flex布局，到了移动端，放心大胆的用它吧，不用再纠结水平对齐、垂直对齐，不用搞个计算器在那算百分比，弹性盒子在移动端布局时大大减小了工作的复杂度，注意，不是难度而是复杂度，对于前端来说我认为移动端布局可能是最简单的工作。

##### 蓝湖 #####

再安利一个神器，[蓝湖][Link 2]，有了它UI和前端再也不用传递设计稿了，UI和前端协助的效率大大提高，其实在使用蓝湖后我本人几乎再也不打开PS查看设计稿了，功能就不累述了，总之工作效率会大大提高再提高。

[-]: https://blog.csdn.net/dreamingbaobei3/article/details/90905728
[Link 1]: https://blog.csdn.net/dreamingbaobei3/article/details/90718161
[Flex]: https://blog.csdn.net/dreamingbaobei3/article/details/89217710
[Link 2]: https://lanhuapp.com/