CSS mobile terminal page

What is a responsive page?

* Responsive pages means that as device attributes (such as width and height) change, web pages also change. 
* Two sets of pictures are required for responsive pages: mobile terminal and web terminal (mobile terminal is recommended)

---

How to adapt the mobile terminal match?

Interaction on the mobile phone

* No hover, resize, scroll bar
* There is a touch event

1.media queryMedia query (Responsive)

//If the media meets max-width: 375px, this css style will take effect

@media Yes Use the css file instead, and add the media query condition in the link to take effect.

Avoid css cascading Coverage method

1. The range conditions should not overlap. 
2. Write the larger range in front. 

---

2. Mobile phone add a meta (responsive)

Shortcut: meta:vp

 

/*The following is a comment*/
device-width //The apparent width of the device
initial-scale //Initial Scaling ratio
minimum-scale //The minimum scale to which the user is allowed to zoom
maximum-scale //The maximum scale to which the user is allowed to zoom
user-scalable //Whether the user can manually zoom 
With the addition of the above meta, it can be achieved on the mobile terminal  1:1 zoom, so that it is truly adapted to the mobile terminal (how big the device is) How big the page is, users can’t zoom in and out): 
 
* Prevent the phone page from simulating a 980px width
* Prevent the page from zooming in when the user double-clicks
* Prevent the page from becoming horizontal 

 3. Method 1: Use JS to dynamically adjust rem 

Because rem represents the font-size size of the root element (html element). Then you can first set 1rem = html font-size = 1page width, so that you can directly adjust rem proportionally later. 
As shown in the picture

 < p>Turn the unit into an integer

 Final code
 
 

// pageWidth/10 is to adjust rem to an integer. 1rem = 0.1px. 
// When it is changed to pageWidth/100, it violates the 12-pixel principle and will cause typographical confusion. 
// rem can coexist with other units. For small units, you can use px or em, such as lines. 
 Method 2: Add in the scss file, this method can realize px automatically change rem
@function px( $px ){
 @return $px/$designWidth*10 + rem;
}

$designWidth: 750; // 750 is the width of the design draft. 

.child{
 width: px(375);
 height: px(160);
 margin: px(40) px(40);
 border: 1px solid red;
 float: left;
 font-size: 1.2em;
}