前端开发小技巧

1.ios的键盘弹出和收起事件

  document.body.addEventListener('focusin', () => {
    // 软键盘弹出的事件处理
  })

  document.body.addEventListener('focusout', () => {
    // 软键盘收起的事件处理
  })

2.android的键盘弹出和收起事件

// 当视图窗口大小发生改变时
    window.onresize = () => {
      return (() => {
        if (!this.isResize) {
          // 默认屏幕高度
          this.docmHeight = document.documentElement.clientHeight
          this.isResize = true
        }
        // 实时屏幕高度
        this.showHeight = document.body.clientHeight
      })()
    }

然后监听 ‘showHeight’
    'showHeight': function () {
        if (this.docmHeight >= this.showHeight) {
        // 软键盘弹出的事件处理
        } else {
        // 软键盘收起的事件处理
        }
    },

3.pre标签

HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

4.css改变字母大写

text-transform:uppercase;

5.css画半圆框

.ring {
            position: absolute;
            width: 198px;
            height: 198px;
            border: 2px solid transparent;
            border-left: 2px solid yellow;
            border-top: 2px solid yellow;
            border-radius: 50%;
            border-right: none;

        }

1571378876326.png

.ring {
            position: absolute;
            width: 198px;
            height: 198px;
            border: 2px solid transparent;
            border-left: 2px solid yellow;
            border-top: 2px solid yellow;
            border-radius: 50%;
        }

1571378914974.png

6.calc的常见用法

（1）用于元素居中

/*对于300px*300px*/

position:absolute; top: calc(50% - 150px); left: calc(50% - 150px);

（2）清晰

如果使用一组项目为他们父元素容器的1/6，

width：calc(100% / 6)；