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);
网友评论