The following article is from IQ front by JowayYoung

1. Adaptive layout

For mobile terminals, the author usually combines JS to dynamically declare font size of < HTML > according to the proportion of screen width and design drawing width, and declare geometric attributes of all nodes with REM as the length unit, so that the page compatibility of most mobile devices can be achieved, and special processing can be done through media query in places with large compatibility.

I usually set the REM layout scale to 1REM =100px, that is, the length of 100px on the design is represented by 1rem on the CSS code.

function AutoResponse(width = 750) {
    const target = document.documentElement;
    if (target.clientWidth >= 600) {
        target.style.fontSize = "80px";
    } else {
        target.style.fontSize = target.clientWidth / width * 100 + "px";
    }
}
AutoResponse();
window.addEventListener("resize".() = > AutoResponse());
Copy the code

Of course, you can also use calc() to dynamically declare < HTML > font size based on the ratio of screen width to design width, thus saving the above code. No, completely replace the above code.

html {
    font-size: calc(100vw / 7.5);
}
Copy the code

If iPad Pro resolution 1024px is used as breakpoint on both mobile and desktop, breakpoint handling can also be combined with media query. Use REM layout below 1024px, otherwise do not use REM layout.

@media screen and (max-width: 1024px) {
    html {
        font-size: calc(100vw / 7.5); }}Copy the code

2. Adaptive background

Use REM layout to declare an element background. In most cases background-size is declared as cover. It is possible that on a mobile device with the corresponding resolution of the design, the background will fit perfectly, but on a mobile device with another resolution, there will be a gap between 1px and NPX left and right.

At this point, background-size is declared to be 100% 100%, which changes with width and height. Anyway, width and height are the actual measured dimensions.

.elem {
    width: 1rem;
    height: 1rem;
    background: url("pig.jpg") no-repeat center/100% 100%;
}
Copy the code

3. Monitor screen rotation

Are you still using JS to judge landscape and portrait adjustments? That’s really Out.

/ * * / vertical screen
@media all and (orientation: portrait) {
    /* Custom style */
}
Landscape * / / *
@media all and (orientation: landscape) {
    /* Custom style */
}
Copy the code

4. Support for elastic rolling

Scrolling with non-< body> elements can stall on Apple, but not on Android. Optimize elastic scrolling by declaring overflow-scrolling:touch and calling system native scrolling events to increase scrolling fluency.

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}
Copy the code

5. Forbid rolling propagation

Unlike desktop browsers, mobile browsers have a strange behavior. When the page contains multiple rolling areas, if there is still rolling momentum after rolling a region, the remaining momentum will be transmitted to the next rolling area, causing the region to also roll. This behavior is called “rolling propagation.”

You can ban it if you don’t want it to happen.

.elem {
    overscroll-behavior: contain;
}
Copy the code

6. Disable screen jitter

For some pages with sudden appearance of scroll bars, there may be adverse effects of left and right jitter. In a scroll container, open the popover to hide the scroll bar, close the popover to show the scroll bar, and move back and forth to make the screen shake. Declaring the padding-right of the scroll container to be the width of the scroll bar can eliminate this effect.

The width of the scroll bar may vary from mobile browser to mobile browser and may not even occupy the same position. You can calculate the width of the scroll bar indirectly by using the following method. 100vw is the window width, 100% is the scroll container content width, subtract is the scroll bar width, no problem dynamic calculation.

body {
    padding-right: calc(100vw - 100%);
}
Copy the code

7. Do not long press

Sometimes you do not want users to click the link, make a call, send an email, save a picture or scan the QR code by pressing the element call menu.

Sometimes you don’t want users to copy and paste stolen copy. Declare user-select: None to prevent users from holding down and selecting copy.

* {
    /* pointer-events: none; * / /* wechat browser also needs to attach this attribute to be valid */
    user-select: none; /* Disallow long press to select text */
    -webkit-touch-callout: none;
}
Copy the code

But declaring user-select: None makes and unable to enter text, excluding user-select:auto.

input.textarea {
    user-select: auto;
}
Copy the code

8. Prohibit font adjustment

While rotating the screen may change the font size, declare text-size-adjust:100% to leave the font size unchanged.

* {
    text-size-adjust: 100%;
}
Copy the code

9. Disable highlighting

Touch elements will appear translucent gray mask, do not want!

* {
    -webkit-tap-highlight-color: transparent;
}
Copy the code

10. Disable animated flash screen

When adding an animation to a mobile device, most of the time a flash screen will appear. Creating a 3D environment for the parent element of the animation element will keep the animation stable.

.elem {
    perspective: 1000;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
Copy the code

11. Make forms look good

Appearance: None to help you customize the form element style.

button.input,
select,
textarea {
    appearance: none;
    /* Custom style */
}
Copy the code

12. Beautify scrolling placeholders

The scrollbar style is too ugly to want to customize, ::-webkit-scrollbar-* to help you. Remember the following three key words to be flexible.

• ::-webkit-scrollbar: indicates the entire part of the scrollbar
• ::-webkit-scrollbar-track: indicates the track part of the scrollbar
• ::-webkit-scrollbar-thumb: part of the scrollbar slider

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-image: linear-gradient(135deg.#09f.#3c9);
}
Copy the code

13. Beautify the input placeholder

Input box placeholder text is too ugly, ::-webkit-input-placeholder to help you.

input::-webkit-input-placeholder {
    color: #66f;
}
Copy the code

14. Align input placeholders

Students with obsessive-compulsive disorder always feel that the text position of the input box is on the whole, and the feeling is not centered. In the desktop browser, declare line-height equal to height. In the mobile browser, declare line-height equal to height.

input {
    line-height: normal;
}
Copy the code

15. Align the drop-down options

The dropdown options are aligned to the left by default, so it’s time to align them to the right.

select option {
    direction: rtl;
}
Copy the code

16. Fixed invalid click

On Apple systems, there are cases where listening for click events on non-clickable elements may not be effective; this can be solved by declaring cursor:pointer on elements that do not trigger click events.

.elem {
    cursor: pointer;
}
Copy the code

17. Recognize text newlines

Most of the time you’ll use JS newline text, and that’s really Out. If the interface return field contains \n or

, do not replace it. Instead, declare white-space:pre-line and submit it to the browser for line breaking.

* {
    white-space: pre-line;
}
Copy the code

18. Enabling Hardware Acceleration

.elem {
    transform: translate3d(0.0.0);
    /* transform: translateZ(0); * /
}
Copy the code

19. Draw pixel borders

Ten thousand years topic, how to depict a pixel border?

.elem {
    position: relative;
    width: 200px;
    height: 80px;
    &::after {
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid #f66;
        width: 200%;
        height: 200%;
        content: "";
        transform: scale(.5);
        transform-origin: left top; }}Copy the code

20. Control overflow text

Ten thousand years topic, how to control text to do single line overflow and multi-line overflow?

.elem {
    width: 400px;
    line-height: 30px;
    font-size: 20px;
    &.sl-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &.ml-ellipsis {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3; -webkit-box-orient: vertical; }}Copy the code