移动端H5

发表于 | 分类于

移动端H5

HTML

  • 调用系统功能
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!-- 拨打电话 -->
    <a href="tel:10086">拨打电话给10086小姐姐</a>

    <!-- 发送短信 -->
    <a href="sms:10086">发送短信给10086小姐姐</a>

    <!-- 发送邮件 -->
    <a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>

    <!-- 选择照片或拍摄照片 -->
    <input type="file" accept="image/*">

    <!-- 选择视频或拍摄视频 -->
    <input type="file" accept="video/*">

    <!-- 多选文件 -->
    <input type="file" multiple>

CSS

  • 自动适应布局

    • rem布局比例设置成1rem=100px，即在设计图上100px长度在CSS代码上使用1rem表示

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      function AutoResponse(width = 750) {
          const target = document.documentElement;
          if (target.clientWidth >= 600) {
              target.style.fontSize = "80px";
          } else {
              target.style.fontSize = target.clientWidth / width * 100 + "px";
          }
      }
      AutoResponse();
      window.addEventListener("resize", () => AutoResponse());

    • calc()动态声明的font-size

      1
      2
      3
      html {
          font-size: calc(100vw / 7.5);
      }

    • iPad Pro分辨率1024px为移动端和桌面端的断点，还可结合媒体查询做断点处理。1024px以下使用rem布局，否则不使用rem布局

      1
      2
      3
      4
      5
      @media screen and (max-width: 1024px) {
          html {
              font-size: calc(100vw / 7.5);
          }
      }

  • 监听屏幕旋转

    1
    2
    3
    4
    5
    6
    7
    8
    /* 竖屏 */
    @media all and (orientation: portrait) {
      /* 自定义样式 */
    }
    /* 横屏 */
    @media all and (orientation: landscape) {
      /* 自定义样式 */
    }

  • 美化滚动条

    • ::-webkit-scrollbar：滚动条整体部分
    • ::-webkit-scrollbar-track：滚动条轨道部分
    • ::-webkit-scrollbar-thumb：滚动条滑块部分
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
      }
      ::-webkit-scrollbar-track {
        background-color: transparent;
      }
      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-image: linear-gradient(135deg, #09f, #3c9);
      }

JS

  • 简化回到顶部
    • 该函数就是scrollIntoView，它会滚动目标元素的父容器使之对用户可见，简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让scrollIntoView滚动起来更优雅
    • behavior：动画过渡效果，默认auto无，可选smooth平滑
    • inline：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐
    • block：垂直方向对齐方式，默认start顶部对齐，可选center中间对齐、end底部对齐和nearest就近对齐
    • TIPS 当然还可滚动到目标元素位置，只需将document.body修改成目标元素的DOM对象 
      1
      2
      const goTopBtn = document.getElementById("go-top-btn");
      goTopBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));

了解更多

postcss-px-to-viewport

  • postcss-px-to-viewport 对内联css样式，外联css样式，内嵌css样式有效，对js动态css无效。所以要动态改变css展示效果的话，要使用静态的class定义变化样式，通过js改变dom元素的class实现样式变化
  • Vant组件的设计稿尺寸是375px，可用通过覆盖:root下的Vant的css变量中px单位的方式，对Vant组件做适配
  • vue模板中的px单位不会被转换