当前位置：网站首页>Mobile web training day-1

Mobile web training day-1

2022-06-28 13:06:00 【HHppGo】

1. Characteristics of mobile terminal

1.1 Mobile and PC There are some differences between end pages

Different sizes ：
- PC The screen Big , Mobile terminal screen Small
Different content locations ：
- PC The end content is in Forum
- The mobile terminal is full of content , Of the screen width 100%
summary ：
- By comparing the differences , We realized that , Different mobile terminals , Different screen widths
- Need to do in the future Mobile Web Page adaptation （ The core ）

1.2 Google simulator

effect ： It can easily simulate different mobile devices , Conduct code and effect debugging

1.3 The resolution of the

I.e. number of pixel cells
Insert picture description here

Why understand device resolution ？
- Different devices have different resolutions , In order to know what resolution to write code for future development , Need to know the resolution
Screen size ：
- The screen Diagonal distance , In inches
Screen resolution ：
1. Physical resolution
  - Factory resolution of the equipment , At the hardware level , Can't change
2. Logical resolution
  - Zoom the resolution through the driver of the system , You can modify
3. When developing , Refer to that resolution ？
  - Logical resolution

1.4 viewport

Concept ：
- The visual area of a web page

In development , The width of the web page should be consistent with the logical pixel width of the device , How to achieve ？

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--  Viewport label ： Make sure the page width is the same as the logical pixels of the device  -->
  <!-- name="viewport"  Express   viewport , Visual area of the page  -->
  <!-- content="width=device-width  Express   The width of the visible area of the page is the width of the device ( Logical pixel width ) -->
  <!-- initial-scale=1.0"  Represents the zoom ratio of the resolution ,1.0 == 100%, Don't zoom  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Test viewport width </title>
</head>

1.5 Double

Why should a designer design a double ？
- Make sure that pictures are placed on different screens , It won't blur
Front end developers , Which resolution does the code refer to ？
- Logical resolution （ The corresponding graph is a one fold graph ）

2. Percentage layout （ understand ）

effect ：

Width adaptation , Fixed height

The width is adaptive in percentage

.toolbar li {
        
  float: left;
  /*  Percentage layout ： Width adaptation   Let five li label , Every li The tag occupies one fifth of the parent  20% */
  width: 20%;
  /*  Percentage layout ： Fixed height  */
  height: 50px;
}

3. Flex Layout

3.1 Part of the

Insert picture description here

effect ：
- be based on Flex Accurately and flexibly control the layout of block level boxes , Avoid separation from document flow in floating layout .
- Flex Layout Very suitable for structured layout
Setting mode ：
- The parent element adds display: flex;
Part of the ：
1. Elastic container
2. Elastic box
3. Spindle
4. Side axle

3.2 Spindle alignment

/* flex Layout  */
display: flex;

/*  Adjust the horizontal spacing  */

/*  The default value is , From left to right , No spacing  */
justify-content: flex-start; 

/*  The default value is , From right to left , No spacing  */
justify-content: flex-end; 

/*  Center along the main axis , No spacing  */
 justify-content: center; 
 
/*  In the direction of the spindle , Each box has the same left-right spacing  */
 justify-content: space-around; 
 
/*  In the direction of the spindle , The leftmost and rightmost boxes are close to the left and right of the parent , Space draw allocated to other boxes  */
 justify-content: space-between; 
 
/*  In the direction of the spindle , Each elastic box has the same spacing  */
justify-content: space-evenly;

effect ：

justify-content: center;
Center along the main axis , No spacing

justify-content: space-around;
In the direction of the spindle , Each box has the same left-right spacing

justify-content: space-between;
In the direction of the spindle , The leftmost and rightmost boxes are close to the left and right of the parent , Space draw allocated to other boxes