移动页面兼容性布局

闲来无事，整理下目前常见的移动端页面布局。主要有流式布局、响应式布局、固定宽度做法、设置viewport进行缩放、rem等比例适配等。下文只是个人及网络上对各布局的看法，如有不当之处或其它方法，可回复。
     1、流式布局
     流式布局的解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是显示的效果极其的不好，因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果。在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下 显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看 到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。

流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

      2、固定宽度做法

      还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计 灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小。

    3、响应式布局

    响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。

    4、设置viewport进行缩放

    以一个固定宽度为基准，进行缩放，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。为了在不同手机、不同系统、不同浏览器和不同的屏幕尺寸间自适应页面，我们需要根据手机类型、系统类型、浏览器类型、屏幕尺寸动态的设置页面的viewport的值。

    之前做的一个项目中手机页面所用到的兼容性方案就是如此，在项目测试中遇到了缩放比例难以调控的问题：要根据手机品牌、系统类别、浏览器类别等来设置缩放比例，手机品牌、系统类别、浏览器类别目前只能通过浏览器的navigator.userAgent中的信息来截取到的，但一些非主流浏览器无法得到某些参数，并且手机品牌型号参数千变万化，甚至浏览器的版本、手机系统版本的不同造成的缩放效果也不尽相同。在兼容性方面存在风险。

    5、rem等比例适配

    rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。设置元素高度、宽度、字体大小等属性的单位为rem,在不同屏幕分辨率下只设置html的字体大小就可以控制其它元素来达到兼容性的效果。可以通过响应式或JS来动态设置html字体 大小。

 

   我目前项目中采用的是页面宽度用流式做，高度字体等用rem作为单位，通过响应式来控制rem根元素大小，实验效果还是可行的。

转载于:https://www.cnblogs.com/18th-Inn/p/4566444.html