(Creating is not easy, thank you, your support is the biggest motivation for me to move forward, if it is helpful to you after reading it, please leave your footprints)
Table of contents
Mobile Web Fundamentals
phone simulator
Screen Resolution
Screen resolution: the number of pixels in the vertical and horizontal directions, the unit is px
PC resolution
1920 * 1080
1366 * 768
...
scaling 150%
1920 / 150%
1080 / 150%
summary
hardware resolution → physical resolution (factory settings)
scaling adjustment resolution → logical resolution (software/driver settings)
Viewport
The screen size of the mobile phone is different, and the width of the web page is 100%. The
width of the web page is the same as the logical resolution sizeViewport: The area where the HTML web page is displayed, used to constrain the HTML size
width=device-width: viewport width = device width
initial-scale=1.0: zoom 1 times (no zoom)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!– 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>double graph
Concept: the multiple of the size of each element in the design draft
Function: prevent the image from being blurred and distorted on a high-resolution screenAt this stage, the design draft refers to iPhone6/7/8, and the device width is 375px to produce the design draft.
The design draft size of double image: 750px.
Adaptation scheme
Width adaptation : width adaptive
percentage layout
Flex layout
ratio adaptation : aspect ratio scaling
rem
vw
rem adaptation scheme
rem
The rem unit is a relative unit.
The rem unit is the calculation result relative to the font size of the HTML tag.
1rem = 1HTML font size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*
{
margin: 0;
padding: 0;
}
html
{
font-size: 30px;
}
.box
{
width: 5rem;
height: 3rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>media query
The screen sizes and resolutions of mobile phones are different. How to set different font sizes for HTML tags?
Media query
Media query can detect the width of the viewport , and then write differentiated CSS styles
When a certain condition is true, execute the corresponding CSS style
@media (width:320px)
{
html
{
background-color: green;
}
}rem – flexible.js
flexible.js is a js library developed by Taobao to adapt to the mobile terminal.
The core principle is to set different font-sizes for the HTML root node in the web page according to different viewport widths.
rem - mobile adaptation
rem unit size
1. Determine the base root font
size Check the width of the design draft → determine the reference device width (viewport width) → determine the base root font size (1/10 viewport width)
2. The size of
the rem unit size = px unit value / base root font size
less
less – Introduction
Less is a CSS preprocessor, and the Less file suffix is .less. The CSS language is expanded to make CSS have a certain logic and calculation ability.
Note: browsers do not recognize Less codes. At this stage, web pages need to import corresponding CSS files
VS Code plug-in: Easy LESS, automatically generate corresponding CSS files after saving less files
less – comments
Single-line comment
syntax: //
shortcut key for comment content: ctrl + /
block comment
syntax: /* comment content */
shortcut key: Shift + Alt + A
less – operation
Operations:
Addition, subtraction, multiplication Directly write the calculation expression
Division needs to add parentheses or .
Note: There are multiple units in the expression, the first unit shall prevail
less - nesting
Role: Quickly generate descendant selectors
Tip: use & to represent the current selector, no descendant selector will be generated, usually used with pseudo-classes or pseudo-elements
less - variable
Concept: container, store data
Function: store data, easy to use and modify
Syntax:
define variable: @variable name: data;
use variable: CSS attribute: @variable name;
less - import
Function: import less public style file
Syntax: import: @import "file path";
hint: if it is a less file, the suffix can be omitted
less - export
How to write: add // out: storage URL to the first line of the less file
Tip: add / after the folder name
less - disable export
Writing method: Add in the first line of the less file: // out: false
