1: Mobile terminal adaptation reason:
In order to make the page compatible with different screen sizes, the size of fonts / elements can change dynamically
Note:
The page is developed according to the standard of the design draft, and some contents on the mobile phone are scaled proportionally according to the screen width,
Some contents shall be changed as required:
- CSS uses converted units (rem, vw relative units) for elements that need to be scaled proportionally
- For elements that do not need to be scaled, such as border shadows, use the fixed unit px
2: Adaptation scheme:
1.viewport adaptation
The page is developed according to the design draft standard (750px width). After writing, the page and elements are automatically reduced to adapt to the 375 width screen
Set the following code in the head
<meta name="viewport" content="width=750,initial-scale=0.5">
Initial scale = width of screen / width of design draft
In order to adapt to other screens, you need to dynamically set the value of initial scale
<head> <script> const WIDTH = 750 const mobileAdapter = () => { let scale = screen.width / WIDTH let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}` let meta = document.querySelector('meta[name=viewport]') if (!meta) { meta = document.createElement('meta') meta.setAttribute('name', 'viewport') document.head.appendChild(meta) } meta.setAttribute('content',content) } mobileAdapter() window.onorientationchange = mobileAdapter //Execute again when the screen flips </script> </head>
The disadvantage is the edge problem. Under different sizes, the thickness of the edge is different (after proportional scaling). All elements are proportional scaling, and the actual display effect may not be very good
2.vw adaptation (partial proportional scaling)
- The developer gets the design draft (assuming that the size of the design draft is 750px, and the element annotation of the design draft is based on this width annotation)
- Start development, convert the annotation of the design draft, and replace PX with vw. For example, the font size of page element is 32px, and vw is (100/750)*32 vw
- CSS uses the converted units for elements that need to be scaled proportionally
- For elements that do not need to be scaled, such as border shadows, use the fixed unit px
For conversion, for development convenience, use custom attributes and CSS variables
<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> <script> const WIDTH = 750 //: root {-- width: 0.133333} how much is 1 pixel equal to vw document.documentElement.style.setProperty('--width', (100 / WIDTH)) </script> </head>
Note that at this time, do not set scaling in meta
It can be written in the business code
header { font-size: calc(28vw * var(--width)) }
Enables on-demand scaling
3.rem adaptation
- The developer gets the design draft (assuming that the size of the design draft is 750px, and the element mark of the design draft is marked based on this width)
- Start development and convert the annotation of the design draft
- CSS uses the converted units for elements that need to be scaled proportionally
- For elements that do not need to be scaled, such as border shadows, use the fixed unit px
Assuming that a font size of the design draft is 40px, the font size on the mobile phone screen should be 420/750*40 = 22.4px (good experience). When converted to REM (relative to the html root node, assuming that the font size of html = 100px), the font size is 0.224 rem
When writing styles, set the corresponding font to 0.224 rem, and convert the dimensions of other elements
But there are problems
For example, the label of the design draft is 40px, and the calculation has to be done when writing the page, which is very troublesome (all have to be calculated)
Can you specify that when you see 40px, you should write 40/100 = 0.4 rem, so you can know how much to write (without calculation). At this time, the font size of html cannot be 100px, it should be (420*100)/750 = 56px, and 100 is the parameter we want to specify
Set the font size value of html according to different screen widths
<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> <script> const WIDTH = 750 //Design draft size const setView = () => { document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px' } window.onorientationchange = setView setView() </script> </head>
CSS uses the converted units for elements that need to be scaled proportionally
header { font-size: .28rem; }
For elements that do not need to be scaled, such as border shadows, use the fixed unit px
header > span.active { color: #fff; border-bottom: 2px solid rgba(255, 255, 255, 0.3); }
Assuming that the font size of html = 1px, you can write 28 rem, which is more convenient. However, the browser has restrictions on the font size. If it is set to 1px, it will be invalid in the browser. A calculation will be made with the minimum value of 12px (or other values), and a very exaggerated result will be obtained. Therefore, you can write html larger
4. Media query adaptation
That is: list the font sizes under each size one by one with media query
5.JS for adaptation
js is used to dynamically modify the font size of the root element node, and the function to obtain the font is called again when the page size changes
You need to pay attention to the design draft size and standard given by the ui