浅谈移动端适配大法

站长资源 2024/11/16 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

前言

前端代码的编写永远逃不过“兼容”二词，从前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是这样设置的：

a) 由于提供的设计稿现在基本都是以iPhone6/7/8为参考的，宽度为750px，dpr为2，所以计算rem时的参考屏幕宽度可以设置为375。

b) 由于chrome的最小字体是12px，又为了计算方便，所以可以设置1rem的大小为20px
应用过程中，比如我们拿到了一个750的设计稿，那么首先，将设计稿里的数值除以2，得到按手机屏幕大小布局的数值（这也是375的由来）。然后，再除以20就可以将设计稿中的px转化为rem了。

三、媒体查询

使用场景：一般利用媒体查询来进行特殊处理，比如

1、iphoneX这类全屏的适配

2、在适配dpr为3的iPhone Plus或者pad横屏等超级大屏时，需要根据业务需求设置临界值，然后展示不同内容或者替换不同分辨率图片（也就是常说的2倍图、3倍图的使用）等

四、vw、vh

vw是以屏幕宽度为基准的百分比单位，1vw=1% * deviceWidth

vh是以屏幕高度为基准的百分比单位，1v=1% * deviceHeight

vw,vh确实很好用，但是目前使用时仍需考虑兼容性的问题，在国内一些手机自带浏览器里（比如华为）会失效，并且据说碰上X5内核时也容易踩坑。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

移动端,适配

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

评论“浅谈移动端适配大法”

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

浅谈移动端适配大法

跨域图片资源权限(CORS enabled image)

关于移动端页面强制竖屏的方法

评论“浅谈移动端适配大法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

浅谈移动端适配大法

跨域图片资源权限(CORS enabled image)

关于移动端页面强制竖屏的方法

评论“浅谈移动端适配大法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存