zoukankan      html  css  js  c++  java
  • iphoneX的适配

    iphoneX的适配

    核心就是让底部元素的after占位安全区

    1.index.html修改meta

      <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    

    2.适配的less

    @media only screen and ( 375px) and (height: 690px){
      body {
        padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px
        padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0
        padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
        padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
      }
    }
    @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {   //适配iphoneX的类名
      .iphoneXFooter {    //底部固定定位那个标签加这个即可 透明色
        padding-bottom: constant(safe-area-inset-bottom);  //适配低高版本的iOS
        padding-bottom: env(safe-area-inset-bottom); //适配低高版本的iOS
        &:after{
          position: fixed;
          content: '';
          left: 0;
          bottom: 0;
           100%;
          height: constant(safe-area-inset-bottom);
          height: env(safe-area-inset-bottom);
          background:transparent;
        }
      }
    }
    
  • 相关阅读:
    给文章生成二维码
    用HTML5 Canvas做一个画图板
    失败多少次不要紧,人们只会记住你成功的那一次
    关于读大学的意义
    卸载Anaconda
    Anaconda基本命令
    plt.imshow()
    matplotlib不显示图片
    在Anaconda环境下使用Jupyter Notebook
    join()
  • 原文地址:https://www.cnblogs.com/liuhuanwen/p/8818742.html
Copyright © 2011-2022 走看看