Mobile-side adaptation program, said many more. You can use a percent layout, but percentages and EM are calculated based on the parent element, which is not very convenient in practical applications. Not only can you set the font size using REM, but you can also set the block size. And can be well adapted to a variety of terminals, so this program is very popular.
REM Definitions and browser support scenarios
REM (font size of the root element) refers to the unit of font size relative to the root element. Simply put, it is a relative unit. See REM must think of EM units, EM (font size of the element) is the unit relative to the font size of the parent element. They are very similar, except that a calculated rule is dependent on the root element one is dependent on the parent element calculation. You can look at the browser support for REM first:
You can see the basic support on the mobile side:
ios:6.1 system above support;
android:2.1 system above all support;
The desktop side of IE support is not optimistic.
Usage:
Modern browser, Ie9+,firefox,safari,chrome,opera, the default font is 16PX, set the next root element font size is 16px:
{ font-size:16px;}, and then, if you want the font size of a piece of text to be 12px, you need to set:
{ font-size: 0.75rem; //12÷16=0.75 (REM)}The block size setting is similar, so the key to the overall layout is to set the font size of the root element. Set the root element font size value, the layout can be self-adaptive.
A block size setting, for example:
Set the root element font size to 37.5px, in iphone6 need a wide 100px block, that is:
<!DOCTYPE HTML><HTML> <MetaCharSet= "Utf-8"></Meta> <Head> <title>Vertical-align</title> <styletype= "Text/css">HTML{font-size:37.5px; }#contentBox{width:2.667rem;Height:2.667rem;background:Pink; } </style> </Head> <Body> <DivID= "Contentbox"> </Div> </Body></HTML>
If you want a 100px block under iphone5, you need to set the base value (that is, the root element size) to 32px.
The following is a discussion of the baseline value setting for REM.
REM Reference setting
If you want REM to fit in a different size device, you need to set the appropriate baseline values for different devices, as shown in the example above.
The question is, how much is the base value set to fit?
Generally get the design draft is 375PX (twice times the draft) * *, that is, the size of iphone6. Then for Iphone6, the benchmark value can be set to 37.5px. That is, device width/10. Here is a calculation divided by 10, because you do not want the font-size value to be too large. This will not be too large to use the REM value.
If it is iphone5, the reference value is 32px.
Again, how do I set the benchmark based on the size of the device?
There are two ways to add a datum value via CSS media query and JS:
CSS Media query:
@media (min-device-width:375px) and (MAX-DEVICE-WIDTH:667PX) and (-webkit-min-device-pixel-ratio:2) { html{font-size: 37.5px;} }Use media query to make it difficult to overwrite all devices:
HTML{font-size:20px;}@media only screen and (min-width:401px){HTML {font-size:25px!important; }} @media only screens and (min-width:428px){HTML {font-size:26.75px!important; }} @media only screens and (min-width:481px){HTML {font-size:30px!important; }} @media only screens and (MIN-WIDTH:569PX){HTML {font-size:35px!important; }} @media only screens and (min-width:641px){HTML {font-size:40px!important; }}
And by JS to set up, you can achieve coverage of all devices:
JS to set:
document.getElementsByTagName (' HTML ') [0].style.fontsize = Window.innerwidth/10 + ' px ';About the pros and cons of the scheme, in fact, the above example can be seen, the benchmark value is set to 37.5px (this is the design of the common values), in the calculation of the corresponding REM, decimals need to be rounded, may bring some errors, the design of the colleague Pixel eye can be aware of. Allow these errors to exist in an acceptable situation. This type of situation is more likely to occur on Android.
Other adaptation options
Fixed layouts can also be used:
1. Set width=320 on the viewport meta tag, and the individual elements of the page are also in PX units. By using JS to dynamically modify the Initial-scale of the label so that the page is more than zoom, so just fill the entire screen.
<name= "Viewport" content= "Width=320,user-scalable=no" >
2.rem can also be adapted using its own method of setting viewport and content to facilitate the calculation and setting of values:
For example:
Meta.setattribute (' content ', ' initial-scale= ' + 1/DPR + ', maximum-scale= ' + 1/DPR + ', minimum-scale= ' + 1/DPR + ', user- Scalable=no ');Where DPR is obtained by Window.devicepixelratio, the value of Iphone6 is 2.
For a twice-fold draft, you can set the benchmark value directly to twice times so that you don't have to divide the design's value by 2.
Iphone6 Design Draft 750px, the reference value is set to 75px is possible.
After you modify the zoom multiplier, the problem with the 1px edge is resolved at the same time.
Code:
<!DOCTYPE HTML><HTML> <MetaCharSet= "Utf-8"></Meta> <Metaname= "Viewport"content=""ID= "Viewmeta"> <Head> <title>Vertical-align</title> <styletype= "Text/css">HTML{font-size:75px; }#contentBox{width:2.667rem;Height:2.667rem;background:Pink;Border:1px solid #000; } </style> </Head> <Body> <DivID= "Contentbox"> </Div> </Body> <Scripttype= "Text/javascript"> varMeta=document.getElementById ('Viewmeta'); varDPR=Window.devicepixelratio; Meta.setattribute ('content', 'initial-scale=' + 1/DPR + ', maximum-scale= ' + 1/DPR+ ', minimum-scale=' + 1/DPR + ', User-scalable=no '); </Script></HTML>
Tutu:
Reference:
http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/?utm_source=tuicool&utm_medium=referral# Prettyphoto
Mobile uses REM adaptation and related issues
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
