Mobile terminal adaptation scheme
Adaptation scheme of mobile terminal:
- flex + rem units have the most adaptation effects (such as Taobao and Xiaomi mobile terminals) in the current market
- flex + viewport width /vh unit is a new trend for adaptation effect (such as mobile terminal of station B)
Let flex make the layout (box placement), and let rem or vw/vh realize the size (width and height) of web page elements to fit the screen
rem adaptation
rem unit
Rem is a relative unit. 1rem is the size of html text
such as
<style> html { font-size: 35px; } </style>
Then 1rem is 35 pixels.
Media query
mediaquery can automatically detect the width of the viewport.
A very important function of media query is to modify the size of html text according to the screen width.
Using media query, set different root font sizes according to different viewport widths to complete the adaptation
Syntax:
@media (width:375px) { html { font-size: 40px; } } @media (width:320px) { html { font-size: 30px; } }
Comprehensive:
@media (width:375px) { html { font-size: 37.5px; } } @media (width:414px) { html { font-size: 41.4px; } } .box { width: 5rem; height: 5rem; background-color: pink; }
Through media query, we can detect different viewport widths, set different html text sizes, and set rem units for elements to achieve the effect of element adaptation
flexible.js
The media query is extremely cumbersome to write, and the detection is not accurate enough, so we use flexible js this js file detects the change of screen window in real time through js to detect the width of viewport.
This is also a way worth advocating.
With this js file, we can automatically detect the screen width and automatically modify the html text size, so that the box can be adapted with rem.
<script src="./js/flexible.js"></script>
How to convert px of design draft into rem
Question:
-
flexible can modify the size of html text, and modify the text size: the current screen / 10 is the text size
For example, if the current screen is 375px, the html text size will be 37.5px after adding flexible
-
Is the element size fixed in our design draft? Yes, it's a px unit, but when we develop, we need to use rem to adapt.
-
So how can we convert the px we measured into the adapted rem?
Using the measured px value directly / 37.5 is the value of rem
LESS
less can help us convert px units to rem units.
Less is a CSS preprocessor, and the suffix of less file is less
The CSS language is expanded to make CSS have certain logic and computing power.
less operation
.box { width: 100px + 100; // Note: the first unit shall prevail when calculating the conversion of units height: (100 / 37.5rem); // height: (100rem / 37.5); // height: 100px - 50; margin: (20px * 5) auto; padding: (10px / 5); border: 1px + 2 * 3 solid red; }
Note:
-
The calculation shall be subject to the first unit and written to the last number as far as possible. such as
height: (100 / 37.5rem);
-
Division is special, so you must add parentheses.
-
Don't forget to multiply and divide before adding and subtracting
less nesting
.father { width: 500px; height: 500px; background-color: purple; // children .son { width: 200px; height: 200px; background-color: pink; p { color: red; } } }
generate css After: .father { width: 500px; height: 500px; background-color: purple; } .father .son { width: 200px; height: 200px; background-color: pink; } .father .son p { color: red; }
When we write pseudo classes and pseudo elements, we often use & instead of the parent element
.nav { width: 100px; height: 100px; background-color: pink; &::before { content: '1'; } &:hover::before { color: red; } }
less variable
The biggest advantage of variables is that they are easy to use and modify.
Syntax: @ variable name: value;
@fontSize: 16px; @suibian: hotpink; body { background-color: @suibian; } p { background-color: @suibian; } div { color: @suibian; } nav { border: 1px solid @suibian; }
body { background-color: hotpink; } p { background-color: hotpink; } div { color: hotpink; } nav { border: 1px solid hotpink; }
less import
The import of less is actually the import of less files.
@import './variable.less'; @import url(./variable.less);
The advantage of using less import is that it reduces the number of link tags on html pages.
less export
You can use the plug-in to export settings:
"less.compile": {
"out": "... / css /" / / set the path to export css
},
less prohibit export
// out: false
Summary
What we need is to adapt the mobile terminal: the size of the elements in the page is scaled in proportion to the screen width (appropriately adjusted)
The scheme is as follows:
flex + rem + flexiable.js + less
- Our mobile terminal adopts flex layout.
- rem unit: for mobile terminal adaptation.
- The relative unit of rem is related to the size of html text
- Media query: detect the viewport width of the screen
- flexiable.js: the size of html text can be automatically modified according to the width of the screen
- less: less gives our css computing power
- less allows us to easily convert px to rem