Recently refactoring the TodoList small project I wrote earlier. Compared with the previous version, the reconstructed project uses Hook, Scss as CSS preprocessor, react-router-DOM is upgraded to VERSION V6, and REM mobile adaptation scheme is also used. This paper summarizes the rem mobile terminal adaptation practice on this reconstruction.

1. A few concepts

1. Physical pixels

Physical pixels, also known as device pixels, refer to the display unit on the screen. The actual pixels of the device are determined by the screen of the device itself. A physical pixel is the smallest display unit on the screen, and each display unit has its own color and brightness. For example, if a screen device has 750 pixels in width and 1334 pixels in height, it has 750 × 1334 display units.

2. Logical pixels

Logical pixels, also known as independent pixels, are virtual pixels controlled by programs. In CSS styles, px is usually referred to as logical pixels. Describe an image with a size of 100px by 100px, which is also a logical representation of pixels.

3. Device pixel ratio

Device pixel ratio (DPR) is the ratio of physical pixels to logical pixels, that is:

DPR = Physical pixels/logical pixelsCopy the code

In the same screen size, the content of the same logical pixel is displayed. The larger the device pixel ratio, the clearer the display effect. Because the same logical pixel, the device pixel is larger, will use more physical pixels to display.

2. Mobile adaptation

1. The solution

In the TodoList small project, I used mobile adaptation, REM adaptation.

Rem is the size of the value relative to the font size of the root element . If the font size is not specified for the element, the browser default font size prevails. For example, if the element sets the font size to 24px, then 2rem represents 48px.

Set a specific font size value on the element, by way of media query, if the current device width is less than a certain value, use rem layout.

However, different users have different screen widths. If the font size of the element is the same for each user, the user will see different display effects.

You can use JavaScript to dynamically change the font size value on the element based on the user’s screen width, so that the actual proportion of content displayed is always the same and looks the same for different users.

For example, the design is 400px wide and shows a box that is 40px wide. A user accessing an 800px device should see a box 80px wide. Font size for the element is 2px, and the width of the box is 40rem, so the 80px box is displayed. Keep the proportion of what the user sees in the design draft consistent.

< font size > < font size >

(User equipment width/standard width of design draft) * 100Copy the code

Multiplying by 100 here is just a coefficient, and when writing REM, dividing the width in standard design by 100 translates to the width in REM units.

For example, if the width of a box in the standard design is 40px and 40/100 = 0.4, change it to 0.4rem for mobile adaptation.

Practice 2.

Add JavaScript code at the bottom of the page that sets the font size of the element once the DOM is loaded. It also listens for device width changes and updates the font size value of the element when the device width changes.

<script type="text/javascript">
    function inMobile() {
        document.getElementsByTagName('html') [0].style.fontSize =
            (document.documentElement.clientWidth / 450) * 100 + 'px';
    }
    document.addEventListener('DOMContentLoaded', inMobile);
    window.onresize = inMobile;
</script>
Copy the code

The code in the style, using media queries, uses rem layout when device width is 900px or less. Otherwise, use the PC layout.

@media all and (max-width: 900px) {
    .InputBox {
        input {
            width: 100%;
            font-size: 0.24 rem; }}}Copy the code

This article is their own study of my humble opinion, if there is wrong, welcome to point out the exchange ~