Mobile web screen adaptation (rem)

Mobile web screen adaptation (rem)

Preface

I recently sorted out my previous notes on learning front-end, and found that I didn’t really understand the mobile web screen adaptation (rem), I just knew how to use it.

Next, I’ll record some of my thoughts on mobile web screen adaptation (rem).

rem Introduction

rem represents the font-size of the root element (<html>). That is, if the font-size of the root element is 14px, then 1rem = 14px

rem adapted to mobile web

Adaptation effect

On screens of different sizes, the size of the same element may not appear to be the same, but the proportion of the screen width they occupy is the same.

Code

// In the head tag of the html file <script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // Get the screen width (px)
    var hWidth = html.getBoundingClientRect().width;
    // Set the font-size of the html tag to hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>
// In less /* define variable @r: 750/15 */
@r:50rem; 
div {
  width: 100/@r;
  height: 200/@r;
}

javascript code

First, we copy 1/15 of the screen size (px) to the font-size attribute of the html tag. At this point, on any screen size, 1/15 px of the screen size (px) is equal to 1rem. That is, on screens of any size, as long as the same rem value is set for an element, the proportion of the screen width occupied by the element will be the same on screens of all sizes. If the proportion is the same, it will be adapted to screens of all sizes.

less code

Now we just need to convert the px units of the elements in the design into rem units.

So, at this time, we can regard the design draft as a mobile phone screen of a certain size.
In my case, the width of the design is 750px.

Therefore, 750/15 = 50px, that is, on a mobile phone screen of the size of the design draft, 1rem = 50px.

Then, in the less code, we define a variable @r.

The width of the div is measured to be 100px. Because in a screen of the size of the design draft, 1rem = 50px, so the rem value of the div is: 100/50 rem, that is, 100/@r.

The height of the div is measured to be 200px. Because in a screen of the size of the design draft, 1rem = 50px, so the rem value of the div is: 200/50 rem, that is, 200/@r.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  How to build YUM in Centos7 environment

>>:  Move MySQL database to another disk under Windows

Recommend

js uses cookies to remember user page operations

Preface During the development process, we someti...

XHTML Web Page Tutorial

This article is mainly to let beginners understan...

Use Xshell to connect to the Linux virtual machine on VMware (graphic steps)

Preface: I recently started to study the construc...

Linux kernel device driver proc file system notes

/***************** * proc file system************...

Detailed tutorial on installing pxc cluster with docker

Table of contents Preface Preliminary preparation...

Several ways for Vue to achieve communication between components (multiple scenarios)

Table of contents 1. Props Parent >>> Ch...

In-depth understanding of the seven communication methods of Vue components

Table of contents 1. props/$emit Introduction Cod...

JavaScript canvas implements graphics and text with shadows

Use canvas to create graphics and text with shado...

CSS multi-level menu implementation code

This is a pretty cool feature that makes web page...

Detailed explanation of using tcpdump command to capture and analyze data packets in Linux

Preface tcpdump is a well-known command-line pack...

About the use of Vue v-on directive

Table of contents 1. Listening for events 2. Pass...

Synchronize the full and incremental data of a specific MySQL table to the message queue - Solution

Table of contents 1. Original demand 2. Solution ...

js development plug-in to achieve tab effect

This article example shares the specific code of ...

Analysis of the principle of centering elements with CSS

It is a very common requirement to set the horizo...

Web page image optimization tools and usage tips sharing

As a basic element of a web page, images are one ...