Mobile layout learning of html and CSS

Article directory

Mobile layout learning of html and CSS

Standard way of writing meta viewport tags

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

Physical Pixels vs. Development Pixels

1px=1 physical pixel on the PC side
On the mobile terminal, according to different mobile phone models, 1px=2/3/4 physical pixels

At this time, the double image and the quadruple image should be used, otherwise the image will be blurred on the mobile terminal

background-size

attribute value

px (only fill in one, it must be width, and scaled proportionally)
Percentage (for the parent box)
cover (directly fill the parent box, regardless of whether the picture is displayed completely)
contain (the picture is enlarged to the maximum that can be enlarged in the parent box, and all the content of the picture must be exposed, and there may be blank areas)

Special default styles that need to be cleared on the mobile side

Links are highlighted when clicked

-webkit-tap-highlight-color:transparent;

can use the box model

box-sizing:border-box;
//非要考虑兼容性
-webkit-box-sizing:border-box;

bottom will have a default appearance style, if you want to unify the style
```
-webkit-appearance:none;
```
Pictures and links are prohibited from long-pressing the pop-up menu
```
img,a{
	-webkit-touch-callout:none;
}
```

Choice of mobile technology

Solo production (mainstream)
- Flow Layout (Percentage Layout)
- flex elastic layout (easy to use)
- less+rem+media query layout
- mixed layout
Responsive page compatibility (easy to use but troublesome)
- media query
- bootstrap

rem layout

rem is a relative unit based on html font size,
often used in conjunction with media queries and less

media query

grammar

<!-- 例： -->
	@media screen and (min-width:320px){
		html{
			font-size:20px;
		}
	} 


<!-- 语法 -->
<!-- 	@media mediatype and|not|only (media feature){
		html{
			font-size:20px;
		}
	} 

	mediatype : screen/print/all
	(media feature) : min-width/max-width... -->

Media query import resource

write a css
Introduce in html

<link rel="stylesheet" href="index.css" media="scree and (max-width=640px)"

LESS

Disadvantages of css: unable to calculate, no function, high redundancy
How to use LESS:
install easy less
Write less files with .less suffix
Saving will automatically generate .css as a file
Just import the required page
less syntax
- use variables
  - Define variable @name=value
  - call variable
    - Example: font-size=@font14
- less nesting
  - ```
  nav{
  	a{
  		fons-size:14px;
  	}
  }
```
- The hover and pseudo-element case
```
  nav{
  	a{
  		&:hover{
  
  		}
  		&::before{}
  	}
  }
  
  //加个&符号指向父元素
```
- less operation
  - Enter the operator operation directly, there must be spaces on the left and right
  - The two operation units are different, the first unit shall prevail
  - Only one has a unit, whichever has a unit shall prevail
  - In the new version, parentheses are required for division

Export and location settings

easyless plug-in direct setting

On the first line of the file write

// out: ./css/
//导出到该目录的css文件夹里

// out: ../css/hhh.css
//导出到上级文件夹的css文件夹里，并保存名为hhh.css

//都不要加结尾分号

If you don't need to export, write in the first line
```
//out: false
```

rem layout essence

In essence, page elements use rem units to define the size, and
media queries are used to control the fonsize size of HTML root elements,
so as to achieve layouts that adapt to different interface sizes.

flex layout

For the properties of the parent box

Set the main axis direction

flex-direction : The property values are as follows

row / row-reverse / column / column-reverse
Set whether to wrap

flex-wrap: nowrap / wrap

The default is not to wrap the line. If there are too many things to arrange, the size of the sub-box will be directly modified, which is very arrogant!
The above two points can be written with conforming attributes

flex-flow：row nowrap;

Set the arrangement of main axis sub-elements

justify-content: attribute values are as follows

flex-start / flex-enf / center / space-around /

space-between / space-evenly ( equal spacing everywhere )
Set the arrangement of the child elements of the side axis (in a single row)

align-items : attribute values are as follows

flex-start / flex-end / center / stretch (default value, if not set high)
Set the arrangement of the child elements of the side axis (when there are multiple lines)

align-items : attribute values are as follows

flex-start / flex-end / center / stretch / space-around /

space-between

For properties of child boxes

Set the child box's own unique arrangement

align-self：flex-start / flex-end / center / stretch
Adjust subbox order available

order:1/2/3/4…
flex element

The number of copies to allocate the remaining space for each box

Basic knowledge of HTML and CSS mobile layout