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
Vue implements nested routing method example
1. Nested routing is also called sub-routing. In ...
An article to understand the advanced features of K8S
Table of contents K8S Advanced Features Advanced ...
Automated front-end deployment based on Docker, Nginx and Jenkins
Table of contents Preliminary preparation Deploym...
Detailed explanation of performance optimization ideas for React functional components
Optimization ideas There are two main optimizatio...
Summary of the Differences between find() and filter() Methods in JavaScript
Table of contents Preface JavaScript find() Metho...
Script to quickly list all host names (computer names) in the LAN under Linux
Recently, I have a need to list all host names in...
Detailed explanation of several ways to install CMake on Ubuntu
apt install CMake sudo apt install cmake This met...
SQL Practice Exercise: Online Mall Database User Information Data Operation
Online shopping mall database-user information da...
Solution to VMware virtual machine no network
Table of contents 1. Problem Description 2. Probl...
Detailed explanation of mysql permissions and indexes
mysql permissions and indexes The highest user of...
Index Skip Scan in MySQL 8.0
Preface MySQL 8.0.13 began to support index skip ...
Solve the problem of Syn Flooding in MySQL database
Syn attack is the most common and most easily exp...
JavaScript type detection method example tutorial
Preface JavaScript is one of the widely used lang...
Teach you how to enable the Linux subsystem of Win10 (with detailed pictures and text)
Today I will introduce how to enable the Linux su...
Reasons and solutions for multiple executions of the watch method when Vue monitors route changes
Table of contents Requirement description: Requir...