The front-end small posture that is always used

Some common front-end problem solutions summarized at work, continuous summarization and recording, can fish more happily at work (crossed out)

CSS articles

0. Text wrap bug

Assuming that there is a paragraph of text in a div with a fixed width, the browser's default processing method will be rather silly. In pure Chinese, there is no problem at first glance, but the mixing of English and numbers is prone to bugs. At this time, there are two css methods for the solution. :

 word-wrap: break-word; // 对过长单词会先另起一行
word-break: break-all; // 粗暴地拆掉单词并换行，比较常用

1. CSS realizes black border adaptation of iPhone series

In the past, the adaptation of iPhone X was relatively simple and rude. Usually, the model was judged regularly to make corresponding processing. Nowadays, the iPhone models that need to be adapted are more than the X series. Fortunately, CSS has a corresponding processing scheme, which is very practical. That is viweport. -fit attribute:

Need to set the page content to completely cover the entire window:

 <meta name="viewport" content="width=device-width, viewport-fit=cover">

env() takes effect only if viewport-fit=cover is set, use it according to the situation:

 padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

Computed properties can also be used:

 calc(55px +  constant(safe-area-inset-bottom))

2. Text beyond omission

 display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /** 最大行数 **/
overflow: hidden;

4. ios sliding is not smooth

 overflow: auto;
-webkit-overflow-scrolling: touch;

5. hide div scrollbar

 div::-webkit-scrollbar {
    display: none;
}

6. Horizontal and vertical centering

Absolute positioning, need to declare width and height

 div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

flex, parent control, more commonly used

 .parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

grid, parent control, more concise

 .parent {
    display: grid;
    place-items: center;
}

7. div is editable

Rich Text Editor Principles

 <div contenteditable="true"></div>

8. cslc

CSS precompilation is commonly used in projects, and CSS calculation expressions are generally rarely used, and there may be performance problems. But it is quite convenient to use when needed, such as the adaptation of the black bars on the iPhone above.

 div {
    width: calc(10rem - 20px + 5%);
}

JS articles

0. ios audio cannot be played automatically or in a loop

 var music = document.getElementById('video');
var state = false;

document.addEventListener('touchstart', function(){
    if(state == false){
        music.play();
        state = true;
    }
}, false);

// 微信浏览器
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//循环播放
music.onended = function () {
    music.load();
    music.play();
}

1. The date format display in ios cannot be "-", otherwise an error will occur.

 const date = '2019-01-01'

const newDate = new Date(date.replace(/-/g, '/'))

This problem only occurs on ios, both Android and PC can recognize it.