浅谈移动端适配大年夜法

发布时间: 2019-03-16 00:48:55 来源: 互联网 栏目: 心得技能 点击:

这篇文章重要简介了浅谈移动端适配大年夜法的相干材料,小编认为挺不错的,如今分享给大年夜家,也给大年夜家做个参考。一路跟随小编过去看看吧

媒介

前端代码的编写永久逃不过“兼容”二词,早年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将元素撑开,以完成固定宽高比。

2、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了。

3、媒体查询

应用处景:普通应用媒体查询来停止特别处理,比如

1、iphoneX这类全屏的适配

2、在适配dpr为3的iPhone Plus或许pad横屏等超等大年夜屏时,须要根据营业需求设置临界值,然后展示不合内容或许调换不合分辨率图片(也就是常说的2倍图、3倍图的应用)等

四、vw、vh

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

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

vw,vh确切很好用,然则今朝应用时仍需推敲兼容性的成绩,在国际一些手机自带浏览器里(比如华为)会掉效,并且听说碰上X5内核时也轻易踩坑 。

以上就是本文的全部内容,欲望对大年夜家的进修有所赞助,也欲望大年夜家多多支撑我们。

本文标题: 浅谈移动端适配大年夜法
本文地址: http://yourctp.com/web/xindejiqiao/208988.html

假设认为本文对您有所赞助请赞助本站

付出宝扫一扫赞助微信扫一扫赞助

  • 付出宝扫一扫赞助
  • 微信扫一扫赞助
  • 付出宝先领红包再赞助
    声明:凡注明"本站原创"的一切文字图片等材料,版权均属编程客栈一切,迎接转载,但务请注明出处。
    关于rem适配的3种经常使用封装关于移动端页面强迫竖屏的办法
    Top