美文网首页
前端开发小技巧

前端开发小技巧

作者: 我才不要你管呐 | 来源:发表于2019-10-18 15:52 被阅读0次

    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);

    相关文章

      网友评论

          本文标题:前端开发小技巧

          本文链接:https://www.haomeiwen.com/subject/ryaimctx.html