current position:Home>Mobile web page adaptation

Mobile web page adaptation

2021-08-27 04:52:43 Front end person_ pleasing

One 、 What is mobile adaptation

Mobile Web page , It's often said that mobile phones h5 page 、webview page 、 Web pages developed by official account .

Because there are many mobile phone models , The screen size of each mobile phone is different , So make a mobile page , Need to consider in Android and ios Compatibility of various sizes of equipment , What we have to do web Page adaptation , Just for different devices , The page can maintain a unified display effect , Or scale proportionally .

Two 、 Mobile adaptation scheme

There are several common mobile adaptation schemes :

  • viewport
  • The box model
  • flex
  • rem

2.1、viewport - Visual area

At first, the mobile terminal needs to be taken care of PC End , If not set viewport, When visiting a web page directly , We found that the content of the web page looked small , This is because the page follows PC Minimum end width 980 Displayed , That is, the width of our web page is 980, The screen width of mobile phones is usually 375、411、320、414 etc. , No, 980 So big , So the page has been reduced a lot .

Set up viewport

<meta name="viewport" 
 Copy code 

Respectively for meta The properties of are described below :

  • width - Set up viewport Width , Is a positive integer , Or a string ‘device-width’
  • initial-scale - Sets the initial zoom value for the page , It's a number , It can be a decimal
  • maximum-sacle - Set the maximum page zoom value , It's a number , It can be a decimal
  • user-scalable - Whether the user is allowed to scale , The value is 'yes' perhaps 'no',yes Represents scalable ,no Indicates that scaling is prohibited
  • minimum-scale - The minimum value that allows the user to zoom , It's a number , It can be a decimal
  • height - Set up layout viewport Height , This property is rarely used

In general, users are not allowed to zoom web pages , When setting, you only need :

<meta name="viewport" 
content="width=device-width, initial-scale=1.0 , user-scalable=no" >
 Copy code 

That's all right. , But because some browsers don't recognize initial-scale, So the maximum and minimum zoom limits are added .

viewport After setting the visual area , It will set the width of the web page to the screen width of the mobile device .

If you want to learn more , Can refer to 《viewport Deep understanding and use of - Front end people - Blog Garden 》.

2.2、 The box model

CSS3 Newly added box-sizing attribute , You can set the box model type . The property values are :

content-box - The standard model

border-box - IE Model

The biggest difference between the two is the width of the box :

Standard model width = Wide content + padding + border

IE Model width = Wide content ( contain padding、border)

The advantage of this is that it can be set arbitrarily padding and border, It won't squeeze the arrangement of boxes , But if you set one margin, Will immediately change the arrangement of boxes .

If you want to know more about , Can refer to 《 Front end interview questions “ The box model ” What is it? ?》\

2.3、flex - Elastic layout

Flex yes Flex Box Abbreviation , Means flexible layout , Provide maximum flexibility for the box . Any element can be specified as a flexible layout .

Use the syntax :

 Copy code 

use flex Layout , Also known as flex Containers , The corresponding attributes are :

  • flex-direction Set the arrangement direction ( Down 、 Up 、 towards the left 、 towards the right ) Of
  • flex-wrap Line feed method when the content cannot be placed
  • flex-flow yes flex-direction and flex-wrap Attribute abbreviation default value row nowrap
  • justify-content Defines the alignment on the spindle .
  • align-items Define how items align on the cross axis .
  • align-content Defines the alignment of multiple axes

The child elements in the container increase , The coefficient occupied by the layout : Such as :

<div class="box">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
// Its style is 
 border:solid 1px red;
 Copy code 

At this time we give child No matter how you set the border 、 padding , And the outer margin , Three child Always on one line .

flex Layout advantages :

  • Can achieve border-box The effect of .
  • After adding elastic layout , Elements no longer need to use floats , Clear floating, etc .
  • Set border for line elements 、 The inner and outer margins do not affect the arrangement of peers .
  • You can also use max-width、min-width Or fixed width and flex In combination with , The other side can be automatically filled .

When no other properties are set , Elastic layout is arranged horizontally from left by default , You can also control the vertical layout through attributes , Alignment, etc , You can click on the 《flex Layout making adaptive web pages - Front end people - Blog Garden 》 Study in detail . Super flexible layout , It is also widely used .


rem Is a relative unit . There are two units of length : Relative units and absolute units .

Absolute units : The length is a fixed value , Real size of reaction Physics . Such as :px Pixels , One pixel is equivalent to a small dot on our screen , The screen is actually composed of many pixels , Different displays have different pixel sizes . also cm、mm、in wait .

Relative units : Determined according to its reference , When the size of the reference changes , It will also change . Such as %、rem、em、vh、ex wait .

We often use... In web page layout em and rem Two units :

em - Is relative to itself

rem - yes root em, Relative to the root element

em and rem Modify themselves and html Of font-size size , Will change em、rem Unit size .

characteristic : Use rem Layout time , Just change the width html Of font-size, You can change the size of all elements . Pay attention to is , Use... For all sizing rem.

Recommended reading 《 Understand thoroughly px、rem、em The difference between 》 article .

copyright notice
author[Front end person_ pleasing],Please bring the original link to reprint, thank you.

Random recommended