前端开发小技巧

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

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