Mobile adaptation

1. Mobile terminal adaptation

　　Method 1: viewport adaptive screen width

　　　　　　Create meta tags in html: the width of the page is equal to the width of the screen.

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

　　Method 2: The framework builds the page

1. 　　bootstrap is a responsive tool based on jQuery, suitable for mobile, PC, Pad, etc.
2. 　　ElementUI (PC side), MintUI (mobile side) Developed based on vue component library

The problem of mobile　

　　(1), 1px border

　　　　Method 1: Pseudo element + transform implementation

.scale-1px{
  position: relative;
}
.scale-1px::after{
  content: '';
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  border:1px solid red;
  transform: scaleY(0.5);
}

　　　　Method 2: view + rem implementation

　　(2) Mobile layout

　　　　　　Method 1: Responsive Layout

　　　　　　　　　　Streaming Layout + Media Queries

　　　　　　Method 2: Flexible Layout

　　　　　　　　　　flexbox

　　　　　　Method 3: rem layout

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
   
        <!-- Viewport configuration on mobile terminal + rem settings: It is recommended to use inline js --> 
        < script > 
            // Set the portability and scaling ratio, purpose: to achieve pixel 1:1 restoration     
            var ratio =  1  / (window.devicePixelRatio || 1 );   // window.devicePixelRatio: The pixel ratio of the browser. 
            document.write( ' <meta name="viewport" content="width=device-width,initial-scale= ' + ratio + ' ,minimum-scale= ' + ratio + ' ,maximum-scale= ' + ratio + ' ,user-scalable=no" />)
             // Set the html font size 
            var size = document.documentElement.clientWidth / 7.5; // Calculate with 750 size 
            // The font-size of the html to be set is 100px, which is 1rem 
            document.getElementsByTagName( ' html ' )[ 0 ] .style.fontSize = size +  ' px ' ;
         </ script > 
    </ head > 
    < body >
              code...
    </body>
</html>

Guess you like