Implementation of dynamic rem for mobile layout
|
Dynamic rem 1. First, let’s introduce the current units of length Because the default font-size of the web page is 16px , so 1rem defaults to 16px. The default minimum font pixel of An element will inherit the font-size of its parent element if no font-size is set. 2. Mobile layout There are generally two types of mobile terminal layouts:
Let’s talk about overall scaling first Overall scaling is actually to shrink the web page on the PC to a size that can see the entire page on the mobile screen. This layout was used when the iPhone was first released. Apple found that most web pages in the world are 980px wide, while the width of iPhones is 320px. Therefore, the browser of the iPhone uses a screen width of 320 pixels to simulate a width of 980px, achieving overall zoom. To see the effect, delete the
<style>
div{
width:980px;
margin:0 auto;
background:#f0f0f0;
}
ul{
list-style:none;
}
li{
float:left;
margin-left:10px;
}
clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</body>
But this overall scaling experience is not good, so let's talk about percentage layout. Percentage Layout
//Percentage layout <style>
.child{
background-color:#ccc;
text-align:center;
width:40%;
margin:10px 5%;
float:left;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child">Option 1</div>
<div class="child">Option 2</div>
<div class="child">Option 3</div>
<div class="child">Option 4</div>
</div>
</body>
You can see that the percentage layout can automatically adapt to the screen width. But the percentage layout has a disadvantage that the width and height cannot be associated with each other. As you can see in the gif above, the width keeps getting longer, but the height does not change. In order to make the height of the option box half of its width, we need to know the width of the screen to determine the width and height of the option. vw can be used here, but vw has poor compatibility. We can use rem instead of vw First of all, rem is based on the font-size of HTML, so we can make HTML font-size==pageWidth
<script>
let pageWidth = window.innerWidth;
document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>')
</script> In order to make better use of rem, here 1rem is equal to 1/10 of the screen width. Note that 1rem == 1% of the screen cannot be achieved. Because the browser's minimum Modify the code as above
<style>
.child{
background-color:#ccc;
text-align:center;
width:4rem;
height:2rem;
margin:10px 0.05rem;
float:left;
line-height:2rem;
}
.clearfix::after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child">Option 1</div>
<div class="child">Option 2</div>
<div class="child">Option 3</div>
<div class="child">Option 4</div>
</div>
</body>Effect into the picture
We can see that both the width and height can be changed by percentage, but we will find something very troublesome. In the design draft given to us by the designer, we have to convert the pixel unit of each element into rem. Here we need scss to convert px 3.scss dynamic conversion px
@function pxToRem($px){
@return $px/$designWidth*10+rem; //10 is to divide the entire screen into 10rem
}
$designWidth:320; //Design width.child{
background-color:#ccc;
text-align:center;
width:pxToRem(128);//4rem;
height:pxToRem(64);//2rem;
margin: 10px pxToRem(1.6);
float:left;
line-height:pxToRem(64);
}
.clearfix::after{
content:"";
display:block;
clear:both;
}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. |
<<: Teach you how to achieve vertical centering elegantly (recommended)
>>: Detailed explanation on how to modify the default port of nginx
Recommend
Summary of a CSS code that makes the entire site gray
In order to express the deep condolences of peopl...
Several ways to use require/import keywords to import local images in v-for loop
Table of contents Problem Description Method 1 (b...
MySQL sql_mode analysis and setting explanation
When inserting a set of data into the MySQL datab...
HTML Tutorial: Definition List
<br />Original text: http://andymao.com/andy...
Several ways to implement CSS height changing with width ratio
[Solution 1: padding implementation] principle: I...
MySQL 5.7.20 common download, installation and configuration methods and simple operation skills (decompression version free installation)
I just finished installing MySQL 5.7.19 in the ea...
Vue implements a visual drag page editor
Table of contents Drag and drop implementation Dr...
Implementing file content deduplication and intersection and difference in Linux
1. Data Deduplication In daily work, there may be...
How to hide and forge version number in Nginx
1. Use curl command to access by default: # curl ...
How to smoothly upgrade nginx after compiling and installing nginx
After nginx is compiled and installed and used fo...
SQL fuzzy query report: ORA-00909: invalid number of parameters solution
When using Oracle database for fuzzy query, The c...
Detailed process of configuring Https certificate under Nginx
1. The difference between Http and Https HTTP: It...
Several ways to implement 0ms delay timer in js
Table of contents queueMicrotask async/await Mess...
Vue implements countdown function
This article example shares the specific code of ...
Detailed steps for implementing timeout status monitoring in Apache FlinkCEP
CEP - Complex Event Processing. The payment has n...