移动端主流适配方案

Posted 幽幽冷瞳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端主流适配方案相关的知识,希望对你有一定的参考价值。

1、流式布局(百分比布局)    案例:京东移动端

优点:简单方便,只需要固定高度,宽度自适应;

缺点:大屏幕手机实际显示的不协调。

2、响应式布局

优点:可以节约成本,不用再做专门的web app网站(外包公司、小公司、博客);

缺点:工作量大、维护很难;国内大型企业在移动端很少用。

3、固定宽度     案例:荔枝FM 640

优点:与设备做等比例的缩放;

缺点:在大屏幕手机下两边留白,操作按钮小。

4、目前主流做法rem    案例:淘宝移动端

rem:font size of root element 相对于根目录字体的大小;

优点:能等比例的适配所有的屏幕,rem是根据html的font-size大小来变化的,基于这个出发,我们可以在任何一个设备下根据设备的宽度来设置html字号,从而实现自适应布局。

两种方案:

  (1)rem随设备宽度做自适应,scale值固定为1;

  (2)rem随设备宽度做自适应,viewport进行缩放,scale值不固定。

5、未来趋势

vw/vh  相对于viewport理想的视窗(设备)的比例;(目前兼容性较差)

1vw=10%设备宽度。

 

注:移动端基于标签meta

<meta name="viewport" content="width=device-width,initial-scale=1.0">

附:javascript获取设备宽度并设置根目录下字体大小的一种方法

!function(win){

  var oHtml=win.document.documentElement; //获取html

  var timer=null;

   function changeRem(){

         var width=oHtml.getBoundingClientRect().width; //获取设备的宽度,IE浏览器要做兼容处理

    if(width>540){

      width=540;

    }

    var rem=width/10;

    oHtml.style.fontSize=rem+"px"; //设置根目录下字体大小

  }

  win.addEventListener("rasize",function(){

    clearTimeout(timer);

    timer=setTimeout(changeRem,300);

  })

  changeRem();

 }(window);

以上是关于移动端主流适配方案的主要内容,如果未能解决你的问题,请参考以下文章

移动端适配必须掌握的基本概念和适配方案

懒人必备的移动端定宽网页适配方案

移动端布局总结

再谈移动端适配和点5像素的由来

Vue 项目中的移动端适配方案

移动端web开发主流方案选择