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

Using nginx + fastcgi to implement image recognition server

Mobile web screen adaptation (rem)

Using nginx + fastcgi to implement image recognition server

JavaScript commonly used array deduplication actual combat source code

Implement full screen and monitor exit full screen in Vue

mysql query data for today, this week, this month, and last month

MYSQL replaces the time (year, month, day) field with unchanged hours, minutes, and seconds. Example analysis

Design Reference Beautiful and Original Blog Design

Detailed tutorial on Tomcat installation and deployment in Windows 10

Summary of the use of special operators in MySql

Is your website suitable for IE8?

The core process of nodejs processing tcp connection

Recommend

Complete guide to using iframe without borders or borders (practical experience summary)

Detailed explanation of Nginx installation, SSL configuration and common commands under Centos7.x

Pure CSS to achieve the text icon function by taking the first character of the string

Detailed explanation of CocosCreator message distribution mechanism

Negative margin-top value solves the problem of vertical center alignment between label text and input

CentOS 6.6 source code compilation and installation of MySQL 5.7.18 tutorial detailed explanation

Mysql uses the kill command to solve the deadlock problem (kill a certain SQL statement being executed)

Vue uses better-scroll to achieve horizontal scrolling method example

CSS simulates float to achieve the effect of center text surrounding the image on the left and right

How to customize an EventEmitter in node.js

How to add a pop-up bottom action button for element-ui's Select and Cascader

Ubuntu starts the SSH service remote login operation

A brief discussion on the use of React.FC and React.Component

mysql5.7.19 winx64 installation and configuration method graphic tutorial (win10)

Some key points of website visual design