移动页面兼容性布局

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

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

      二、固定宽度作法

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

    三、响应式布局

    响应式这种方式在国内不多有大型企业的复杂性的网站在移动端用这种方法去作，主要缘由是工做大，维护性难，因此通常都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，由于这样反而能够节约成本，不用再专门为本身的网站作一个web app的版本。

    四、设置viewport进行缩放

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

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

    五、rem等比例适配

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

 

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