The old version routine practice
Option One: Meida Queries Media queries
meida queries It is mainly performed by a different device widths query css code to achieve the final configuration interface. Core syntax is:
|
We need to add meta settings
|
width = device-width: the width represents the width of the screen device
initial-scale = 1.0: indicates the initial scale
minimum-scale = 1.0: represents the minimum scaling
maximum-scale = 1.0: represents the maximum scale
user-scalable = no: indicates whether the user can adjust the zoom
This tag can be guaranteed in a mobile terminal device, the width of the page with the same screen width.
Option Two: viewport scale
Width (320px) minimum Iphone4 / 5 as a reference, the visual reduction draft.
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 /> |
Then the different screen resolutions of mobile phone brute scaling settings. For example: iphone8 (375px) initial-scale = 375/320 = 1.18
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 /> |
initial-scale growing, page content will also be stretched more severe, resulting in page content will become blurred, this method has been abandoned.
Will die height, width adaptive elements are used pxto do the unit.
With the screen width changes, the page will follow the changes, the effect on the PC and fluid layout pages almost on the line (such as Netease news) using responsive layout tone when the width of which needs to be adjusted, thus achieving a "fit."
Program III: in response layout
The new approach
Option IV: rem
In other words, when we specify an element of font-size for the 2remtime, also said that this element is the root element of the font size <html>twice the size of the font, if htmlthe font-size is 12px, then this 2remelement is the font-size 24px. Similarly when the element is 3remtime, then its actual
font-size is 36px.
| html {font-size: 12px;} h1 { font-size: 2rem; } /* 2 × 12px = 24px */ p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */ div {width: 20rem;} /* 20 * 12px = 240px*/ |
You should see here will find, as long as we set up the screen depending on the root element <html>font-size, others have used elements of rem unit will display the corresponding size of the adaptive.
rem computing
We use the unit in advance rem need to do one thing is to set the root element <html>of font-size, there are generally two approaches
Method a: JS Calculation
Screen width read by JavaScript, then calculate and set a size corresponding to the root element according to the width of the font-size.
| const oHtml = document.getElementsByTagName('html')[0] const width = oHtml.clientWidth; // 320px reference pixel screen is 12px oHtml.style.fontSize = 12 * (width / 320) + "px"; |
Such iphone8 (375px) the htmlfont-size is 14.0625px, iphone8p the font-size is 15.525px.
If the font-size elements arranged in iphone8 (375px) as 1.7066rem, which is provided with the effect of 24px font-size is the same (24 / 14.0625 = 1.7066).
The benefits of using JS to get the width of the screen is 100% fit all models width because of its <html>benchmark-sized elements are directly counted out. Since it is a JS code, in order to avoid because the dynamic set <html>of elements font-size pages jitter caused by the general part of the code that we are placed header
Bottom to load, and the inline html document inside.
Method Two: Media Inquiries
Now just to be set according to the width of the screen <html>font size of the element, then we can complete this part of the work done by css3 media queries.
| @media screen and (min-width: 375px){ html { font-size: 14.0625px; } } @media screen and (min-width: 360px){ html { font-size: 13.5px; } } @media screen and (min-width: 320px){ html { font-size: 12px; } } html { font-size: 16px; } |
Rem existing problems
As a simple and crude solution rem a solution distinction different screen views, which can resolve this problem, the vast majority of problems occur and the mobile terminal adapted to the screen size. But since it is not a perfect solution, where it has its limitations.
Large-screen smartphone era is indeed almost entirely replace me ten years ago of the habit of reading the paper. From 2011 to now, the mobile phone screen width hands have been improved, but look at the size of the display using novel software is almost constant. Use rem will break the habit of reading the user's text to a certain extent, especially in the big papers
When pieces of content.
iOS and Android platform adaptation mode design philosophy behind it is this: when reading the text, not the absolute size of the media better readability of text font spacing, etc. absolute size value in combination with text where the relationship. (It can be as simple to understand: A4-size paper and A3 size or even larger newspapers, comfortable reading
Read font size absolute size is the same, because they are required reading in his hand, the phone is also the same reason); when watching video images, photographs, videos ratio should be fixed, the situation should not arise tensile deformation . When used in rem and font size, the font size absolutely inconsistent on different screens, contrary to the design
philosophy.
reference
Brute mobile terminal adaptation scheme - REM
Alibaba TXD mobile terminal adaptation summary