移动端适配大法

最新推荐文章于 2024-10-31 15:49:24 发布

weixin_30617561

最新推荐文章于 2024-10-31 15:49:24 发布

阅读量123

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/rongmm/p/9591619.html

版权

前言

前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢
话不多说，下面就总结了一些移动端常用的适配手法：

一、百分比

使用场景：只要求宽度随屏幕自适应，比如文字块
百分比在PC端自适应上也经常用到，着实相当好用，但它一般用于宽度自适应的设置，高度设置百分比时，要求其父类元素有明确高度。

1、利用百分比实现填充全屏

为了让元素设置height：100%生效，并且正好为窗口高度，则需要给html和body元素以及它所有的父元素都设置高度100%。
例如：

<html style="height: 100%;">
  <body style="height: 100%;">
    <div  class="wrap" style="height: 100%; width:100%">
        填充全屏啦
    </div>
  </body>
</html>

在使用height: 100%;时需要注意的一些事项

Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。

写到这里我突然想插个题外话，对于absolute定位的元素，用height：100%显然也是无效的，因为此时它已经脱离了文档流，此时它的高度由自身内容撑开。这是如果我希望它填满父盒子，怎么做？这里有个黑魔法，设置它的top,left,bottom,right均为0，这时盒子就会被拉伸至填满父盒子。

2、利用百分比实现宽高比固定

有时，我们希望宽度自适应，高度随宽度变化而变化，并有固定的宽高比。
让我们缕缕，用height百分比显然不行，height百分比是以父元素高度为基准的，而我们需要以宽度为基准来设置高度。
所以这里可以用到padding-top或者padding-bottom，padding是以父元素的width为基准的。我们可以设置元素的height：0，然后用padding-bottom将元素撑开，以实现固定宽高比。

二、rem

使用场景：对于图片等对高度自适应有要求的场景
rem单位：以页面根字体的大小，也就是html元素字体的大小为基准，例如

html{
    font-size:16px;
}

那么1rem等于16px。
所以使用时，我们只要让根字体大小随屏幕大小自适应，那页面中所有使用rem单位来设置宽高的元素，大小也会随屏幕大小自适应了。
根据不同屏幕大小设置根字体大小有两种方法：

1、css方法设置rem

利用媒体查询，根据不同的屏幕大小进行设置，缺点就是一般只列举一些代表性的屏幕大小，自适应不能充分覆盖所有范围

html{
    font-size:10px
} 
@media screen and (min-width:321px) and (max-width:375px){
    html{
        font-size:11px
    }   
} 
@media screen and (min-width:376px) and (max-width:414px){
    html{
        font-size:12px
    }
} 
@media screen and (min-width:415px) and (max-width:639px){
    html{
        font-size:15px
    }
} 
@media screen and (min-width:640px) and (max-width:719px){
    html{
        font-size:20px
    }
} 
@media screen and (min-width:720px) and (max-width:749px){
    html{
        font-size:22.5px
    }
} 
@media screen and (min-width:750px) and (max-width:799px){
    html{
        font-size:23.5px
    }
} 
@media screen and (min-width:800px){
    html{
        font-size:25px
    }
}

2、JS方法设置rem

利用JS设置根字体大小，所以若改变发生在渲染完成之后，则会引起回流，导致闪屏现象。因此使用这种方法时，应将JS代码放入head头部中并且在CSS引入之前。

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };
  recalc(); 
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
})(document, window);

上面clientWidth为实际屏幕的宽度，而375为设计稿基于的参考屏幕宽度，20则是当实际屏幕宽度等于参考屏幕宽度时，1rem的大小。代码的关键参数20和375是这样设置的：