Mobile web development is booming, and mobile adaptation is a big headache. You can’t make an element of the same size appear the same size on different devices. (the size of iphone6 and iphone4 should definitely be different, otherwise the user experience will be poor)

For a while, I was struggling with compatibility with lower versions of Internet Explorer and thought I could put all that behind me in the Mobile era. But did not expect to the mobile era, in order to deal with the adaptation of each terminal and messy hands and feet. For the occasionally mixed communities, we often find that we take the H5 page of mobile taobao to discuss — how to achieve multi-terminal adaptation of the H5 page of hand Amoy?

So take advantage of this Amfe Ali wireless front end team double 11 technology serialization, with a real case to tell you, Amoy H5 page is how to achieve multi-terminal adaptation, I hope this article for everyone in the Mobile world can lead a more relaxed.

After studying flexible. Js for the whole afternoon, I didn’t expect to be confused by this border!

Take a look at the most common mobile 1px problems:

* { padding: 0px; margin: 0px; } .js { width: 40px; height: 40px; margin: 0 auto; } .main0 { width: 200px; height: 200px; margin: 0 auto; border: 1px solid red; The transform: scale (0.2); / * 200 * 0.2 = 40 * / margin - top: - 80 px; /*(200-40)/2=80*/ margin-left: -80px; } .my { width: 100px; height: 100px; border: 1px solid red; }
        

            
         

        
        

        
        

    


Copy the code

When I saw the renderings, I was shocked:

What happened to the 100px square?

Add.js border: 1px solid black; , unexpectedly display normal!

* { padding: 0px; margin: 0px; } .js { width: 40px; height: 40px; margin: 0 auto; border: 1px solid black; /* I don't know why. */ } .main0 { width: 200px; height: 200px; margin: 0 auto; border: 1px solid red; The transform: scale (0.2); / * 200 * 0.2 = 40 * / margin - top: - 80 px; /*(200-40)/2=80*/ margin-left: -80px; } .my { width: 100px; height: 100px; border: 1px solid red; }
        

            
         

        
        

        
        

    


Copy the code

　

What is this? Border: 1px solid black; So ye?

Before, before,

* { padding: 0px; margin: 0px; } .js { width: 60px; height: 60px; margin: 0 auto; position: relative; } .js::before { content: ''; width: 200px; height: 200px; margin: 0 auto; border: 1px solid red; The transform: scale (0.3); position: absolute; top: -70px; left: -70px; } .my { width: 100px; height: 100px; border: 1px solid red; margin: 0 auto; }
        

            
         

        
        

        
        

    


Copy the code

　

Can someone explain what border is? Appreciate ！！！！！