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
A brief discussion on the mysql execution process and sequence
Table of contents 1:mysql execution process 1.1: ...
Summary of practical methods for JS beginners to process arrays
join() method: connects all elements in an array ...
CSS and JS to achieve romantic meteor shower animation
1. Rendering 2. Source code HTML < body > &...
Several ways to pass data from parent components to child components in Vue
I have been studying the source code of Vue recen...
How to use JSX to implement Carousel components (front-end componentization)
Before we use JSX to build a component system, le...
MySQL method of generating random numbers, strings, dates, verification codes and UUIDs
Table of contents Generate random numbers Generat...
Detailed explanation of the characteristics, differences and conversion of px, em, rem and pt in CSS
Concept introduction : 1. px (pixel): It is a vir...
4 Scanning Tools for the Linux Desktop
While the paperless world has not yet emerged, mo...
Quickly solve the problem of slow startup after Tomcat reconfiguration
During the configuration of Jenkins+Tomcat server...
How to use vue-cli to create a project and package it with webpack
1. Prepare the environment (download nodejs and s...
Installation tutorial of mysql 5.7 under CentOS 7
1. Download and install the official MySQL Yum Re...
MySQL 5.7.19 winx64 free installation version configuration tutorial
mysql-5.7.19-winx64 installation-free version con...
Detailed explanation of the pitfalls of mixing MySQL order by and limit
In MySQL, we often use order by for sorting and l...
JavaScript canvas text clock
This article example shares the specific code of ...
Specific use of ES6 array copy and fill methods copyWithin() and fill()
Table of contents Batch copy copyWithin() Fill ar...