专栏首页IMWeb前端团队移动端适配大法

移动端适配大法

本文作者:IMWeb 嵘么么 原文出处:IMWeb社区 未经同意,禁止转载

前言

前端代码的编写永远逃不过“兼容”二词,从前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内核时也容易踩坑 。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Z-Blog给文章所有的站外a链接添加nofollow的方法

    在这我不就详细介绍 nofollow 了,近段时间我会整理一些关于 nofollow 的资料。

    德顺
  • 织梦CMS去版权

    找到网站目录下的 \include\common.inc.php 文件,搜索 $cfg_version 可以看到以下信息,修改成你想要的就可以了。

    德顺
  • 2019年搜索引擎蜘蛛爬虫名称最新整理总汇

    一般我们的网站能在百度等搜索引擎上搜到,说明该搜索引擎的爬虫爬到了我们的网站并且被搜索引擎收录。

    德顺
  • NGW,前端新技术赛场:Serverless SSR 技术内幕

    一、前言 最近 Serverless 又火了,有不少业务上云实装了 Serverless 云函数,取得了不错的落地效果,业界也在不断探索 Serverless...

    腾讯云serverless团队
  • Web/PhpStorm代码格式化a、img标签换行的问题解决

    最近发现一个问题,使用 WebStorm 或者 PhpStorm 代码格式化时, a 标签 和 img 标签或者 link 标签会自动换行,显示多行,如下图:

    德顺
  • 微软Chromium内核Edge浏览器扩展插件网站上线

    微软已经发布了官方版本的Microsoft Edge(金丝雀版),现在用户可以访问微软的Addons(全称Microsoft Edge Insider Addo...

    德顺
  • 网站HTTP错误状态代码及其代表的意思总汇

    在调试Web服务器时,会遇到各种错误代码,让人摸不着头脑,单如果知道了这些代码代表什么意思?很多问题就迎刃而解了,对我们的调试也会有很大帮助。

    德顺
  • Discuz! X3.4提示Table './.../k_spider' is marked的解决办法

    (145) Table './.../k_spider' is marked as crashed and should be repaired

    德顺
  • Robots协议探究:如何好好利用爬虫提高网站权重

    站长们通常希望百度、Google 这样的大型搜索引擎来抓取网站内容,但又很厌恶其他来路不明的网络爬虫抓取自己的信息。

    德顺
  • 一些Apache环境常用的.htaccess伪静态规则范例

    德顺

扫码关注云+社区

领取腾讯云代金券