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. 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
Mini Program implements list countdown function
This article example shares the specific code for...
css add scroll to div and hide the scroll bar
CSS adds scrolling to div and hides the scroll ba...
Detailed explanation of meta tags (the role of meta tags)
No matter how wonderful your personal website is,...
MySql index improves query speed common methods code examples
Use indexes to speed up queries 1. Introduction I...
Detailed explanation of the pitfalls of add_header in nginx configuration tutorial
Preface add_header is a directive defined in the ...
How to avoid duplication of data when inserting in MySql batch
Table of contents Preface 1. insert ignore into 2...
How to build mysql master-slave server on centos7 (graphic tutorial)
This article mainly introduces how to build a MyS...
A brief analysis of how to change the root password in Linux suse11 if you forget it
How to solve the problem of forgetting the root p...
JavaScript to implement login slider verification
This article example shares the specific code of ...
10 skills that make front-end developers worth millions
The skills that front-end developers need to mast...
How to add rounded borders to div elements
As shown below: CSS CodeCopy content to clipboard...
CocosCreator Getting Started Tutorial: Making Your First Game with TS
Table of contents premise TypeScript vs JavaScrip...
Linux server quick uninstall and install node environment (easy to get started)
1. Uninstall npm first sudo npm uninstall npm -g ...
How to fix the width of table in ie8 and chrome
When the above settings are used in IE8 and Chrome...
Difference between HTML ReadOnly and Enabled
The TextBox with the ReadOnly attribute will be di...