rem basics
rem unit
rem (root em) is a relative unit, similar to em, where em is the font size of the parent element.
The difference is that the benchmark for rem is relative to the font size of the html element.
For example, if the root element (html) is set to font-size=12px; the non-root element is set to width: 2rem; if it is replaced by px, it means 24px.
rem advantages
The advantage of rem is that you can change the size of elements in the page by modifying the text size in html, which can be controlled as a whole.
media inquiries
What is a media query
Media queries ( Media Query) are new syntax in CSS3.
- Using @media queries, you can define different styles for different media types
- @media can be styled differently for different screen sizes
- When you resize the browser, the page will also be re-rendered according to the browser's width and height
- At present, multimedia queries are available for many Apple mobile phones, Android mobile phones, tablets and other devices.
Grammar specification
@media mediatype and |not |only (media feature) {
css-code;
}
- Beware of the @ symbol at the beginning of @media
- mediatype media type
- keywords and not only
- media feature media features must be enclosed in parentheses
mediatype query type
Divide different terminal devices into different types, called media types
| value | explain |
|---|---|
| all | for all devices |
| for printer and print preview | |
| scree | For computer screens, tablets, smartphones, etc. |
keywords
Keywords link media types or multiple media properties together as conditions for media queries.
- and: It is possible to connect multiple media features together, which is equivalent to the meaning of "and".
- not: Exclude a certain media type, which is equivalent to the meaning of "not" and can be omitted.
- only : Specifies a specific media type, which can be omitted.
Media features
Each media type has its own different characteristics, and different display styles are set according to the media characteristics of different media types. Let's understand three for now. Note that they need to be enclosed in parentheses.
| value | explain |
|---|---|
| width | Defines the width of the visible area of the page in the output device |
| min-width | Defines the minimum visible area width of the page in the output device |
| max-width | Defines the maximum visible area width of the page in the output device |
Example
/*小于540px 页面的背景颜色变为蓝色*/
@media screen and (max-width:539px){
body{
background-color:blue;
}
}
/*540px~970 页面的背景颜色变为绿色*/
@media screen and (min-width:540px) and (max-width:969px){
body{
background-color:green;
}
}
/*540px~970 页面的背景颜色变为绿色*/
/**
可以改造成这种写法，和样式的层叠性有关
@media screen and (min-width:540px){
body{
background-color:green;
}
}
*/
/*大于等于970px 页面的背景颜色变为红色*/
@media screen and (min-width:970px){
body{
background-color:red;
}
}
rem + media query to achieve dynamic size changes
- The rem unit follows html, and with the rem page element, you can set different sizes
- Media queries can modify styles according to different device widths
- Media query + rem can achieve different device widths and dynamically change the size of page elements
@media screen and (min-width:320px){
html{
font-size:50px;
}
}
@media screen and (min-width:640px){
html{
font-size:100px;
}
}
.top{
height:1rem;
font-size:.5rem;
background-color:green;
color:#fff;
line-height:1rem;
}
Media queries import resources
Introducing resources is to call different css files for different screen sizes
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
rem adaptation solution
principle
- Let some elements that cannot be proportionally adapted to adapt to the current device in equal proportions when the size of the device changes.
- Use media query to set the font size of html proportionally according to different devices, and then use rem as the size unit for page elements. When the font size of html changes, the size of the element will also change, so as to achieve proportional scaling.
Actual development adaptation scheme
- According to the ratio of the design draft to the device width, dynamically calculate and set the font-size size of the html root tag; (media query)
- In CSS, the width, height, relative position, etc. of the design draft elements are converted to the value of rem according to the same proportion;
rem adaptation solution technology usage (market mainstream)
Technical solution 1
- less/sass
- media inquiries
- rem
Technical solution 2
- flexible.js
- rem
Summarize
- Both options exist now.
- Option 2 is simpler. At this stage, you don't need to understand the js code inside.
rem Ultimate Adaptation Solution
rem adaptation solution 1
rem+media query+less technology
Design draft common size width
| equipment | common width |
|---|---|
| iphone 4.5 | 640px |
| iphone 678 | 750px |
| Android | Common 320px, 360px, 375px, 384px, 400px, 414px, 500px, 720px, most 4.7~5 inch Android devices are 720px |
Under normal circumstances, we use one or two sets of renderings to adapt to most screens, give up extreme screens or degrade them gracefully, and sacrifice some effects
现在基本以750为准。
Dynamically set the font-size size of html tags
- Suppose the design draft is 750px
- Suppose we divide the entire screen into 15 equal parts (different division standards can be 20 or 10 equal parts)
- Each copy is used as html font size, here is 50px
- Then on a 320px device, a font size of 320/15 is 21.33px
- Divide the size of our page elements by the different html font sizes and find that they are still the same proportion
- For example, we use 750 as the standard design draft
- A 100*100 pixel page element is under 750 screen, that is, 100/50 converted to rem is 2rem * 2 rem ratio is 1 to 1
- Under the 320 screen, the html font size is 21.33, then 2rem = 42.66px. At this time, the width and height are both 42.66, but the ratio of width and height is still 1:1
- But it has been able to achieve the effect of proportional scaling of page element boxes under different screens
Element size value method
- The final formula: rem value of page element = page element value ( px ) / (screen width│ number of divisions)
- The screen width/number of divisions is the size of the html font-size
- Or: rem value of page element = page element value (px) / html font-size font size
rem adaptation scheme 2
Simple and efficient rem adaptation solution flexible.js
- Simple and efficient mobile terminal adaptation library developed by the mobile phone Taobao team
- We no longer need to write media queries for different screens, because js does the processing inside
- Its principle is to divide the current device into 10 equal parts, but under different devices, the ratio is still the same.
- All we have to do is to determine the html text size of our current device.
- For example, the current design draft is 750px, then we only need to set the html text size to 75px (750px/10)
- Inside the page element rem value: the px value of the page element/75
- For the rest, let flexible.js do the math
github address: flexible
vscode px conversion rem plugin cssrem