Beginner mobile terminal

Today, we begin to learn from mobile terminals , Online classes at home due to the epidemic .

One 、 First, let's take a look at one I learned today css3 style

column-count : 3; Number of columns

column-width : 100px; Column width

column-gap : 2em; Column spacing

column-rule : 2px #f00 outset Column style

You can use these attributes to define your paragraph column display .

Two ·、 Media query

@media screen and (max-width: 600px){

.list{

width: 100%;

height: 100px;

     }

}

This attribute is mainly used to set the content displayed under different screen sizes

If the maximum width is specified , Just write a wide range , Write a small range again , This avoids being covered ; If it is a small range , Define from small to large .

3、 ... and 、meta Metadata tags

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

width： control viewport Size , A value that can be specified , If 600, Or special values , Such as device- width Is the width of the device （ The unit is scaled to 100% At the time of the CSS The pixel ）;

height： and width Corresponding , Specifies the height ;

initial-scale： Initial scaling , That is when the page first appears load Scale when theta ;

maximum-scale： The maximum scale to which the user is allowed to scale ;

minimum-scale： The minimum scale that allows the user to scale to ;

user-scalable： Whether the user can manually scale , The value is "yes" or "no".

Four 、em And rem The difference between ：

em： Multiple of a text Inherit the font size of the parent element

rem： Multiple of a text Inherit the font size of the root directory

Today I learned the mobile interface , Made a small case , summary ： The mobile terminal needs to adapt to different screen sizes , So you need to test the screen zoom , And the mobile terminal must define meta label , And we need to introduce media query to adapt to the screen , And the unit of length should be rem.