Flex layouts
Flex layout, using no REM, uses PX directly.
<!DOCTYPE HTML><HTML><Head> <title></title> <style>/*with Flex properties, you can implement block-level elements 1:1:1*//*Simple to center the contents of the inside (especially the vertical center, easy to explode)*/. Box{Display:Flex;width:50px;Height:30px; /*default Row*/flex-direction:Colum;}. Item1{Display:Flex;Flex:1;Background-color:Rgba (213,34,102); /*Justify-content:space-between;*/justify-content:Center;}. Item2{Display:Flex;Flex:1;Background-color:Rgba (34,213,102);Align-items:Center; /*Display:block; line-height:10px; height:10px;*/}. Item3{Display:Flex;Flex:1;Background-color:Rgba (102,213,34); /*Center Vertically*/justify-content:Center;Align-items:Center;} </style>}}</Head><Body><Divclass= "box"> <Divclass= "Item1"></Div> <Divclass= "Item2"></Div> <Divclass= "Item3"></Div></Div></Body></HTML>View Code
REM Solutions
Description
The screen converts the REM value according to the design's proportions (JS will add different scaling ratios depending on the device (recommended inline processing to execute this JS before all resources are loaded))
The screen converts the corresponding REM values according to the proportions of the design, such as:
setting of 750 = 16* (clientwidth/375)
setting of 640 = 20* (clientwidth/320)
setting of 320 = 10* (clientwidth/320)
For example, if the design is 750px wide (based on Iphone6 375*2=750), if the Margin-top value of an area is 20px in the design,
In the actual iphone6 device 375px width, it should be divided by 2, so the value mragin-top is 20/2=10px,
Since 1rem=16px (16* (iphone6 device width/375) + ' px '), the corresponding conversion into REM is 10/16=0.625rem.
The CSS code is margin-top:0.625rem.
var aa = function (Doc, win){var el = doc.documentelement,//html console.log (EL); The Orientationchange event is an event that is triggered when the user horizontally or vertically flips the device (that is, the direction changes). Resizeevt = (' Orientationchange ' in Win)? ' Orientationchange ':' Resize ', Recalc = function () {var clientwidth = El.clientwidth;//clientwidth:gets the width of the object's visible content, excluding scroll bars, excluding borders; if (!clientwidth) {return;}el.style.fontSize = 16* (clientwidth/375) + ' px '; } if (!doc.addeventlistener){return;}The //AddEventListener event method accepts three parameters: the first is the event name such as Click event OnClick,//second is the function to execute, and the third is the Boolean value Win.addeventlistener (resizeevt,re Calc,false); Bind browser zoom and load time Win.addeventlistener (' domcontentloaded ', Recalc,false);} (Function (Doc, win){var el = doc.documentelement,//html console.log (EL); The Orientationchange event is an event that is triggered when the user horizontally or vertically flips the device (that is, the direction changes). Resizeevt = (' Orientationchange ' in Win)? ' Orientationchange ':' Resize ', Recalc = function () {var clientwidth = El.clientwidth;//clientwidth:gets the width of the object's visible content, excluding scroll bars, excluding borders; if (!clientwidth) {return;}el.style.fontSize = 16* (clientwidth/375) + ' px '; } if (!doc.addeventlistener){return;}The //AddEventListener event method accepts three parameters: the first is the event name such as Click event OnClick,//second is the function to execute, and the third is the Boolean value Win.addeventlistener (resizeevt,re Calc,false); Bind browser zoom and load time Win.addeventlistener (' domcontentloaded ', Recalc,false);}) (Document, Windo
//Mobile end H5 Terminal adaptation SchemevarAA =function(Doc, win) {varEl = Doc.documentelement,//HTML //The Orientationchange event is an event that is triggered when the user horizontally or vertically flips the device (that is, the direction changes). Resizeevt = (' Orientationchange 'inchWin)? ' Orientationchange ': ' Resize ', Recalc=function(){ varClientWidth = El.clientwidth;//clientwidth: Gets the width of the object's visible content, excluding scroll bars, excluding borders; if(!clientwidth) {return;} El.style.fontSize= 16* (clientwidth/375) + ' px '; } //Console.log (EL); if(!doc.addeventlistener) {return;} //the AddEventListener event method accepts three parameters: the first is the event name, such as Click event OnClick, //The second is the function to execute, and the third is a Boolean valueWin.addeventlistener (Resizeevt,recalc,false); //Bind browser zoom and load timeWin.addeventlistener (' domcontentloaded ', Recalc,false);} (function(Doc, win) {varEl = Doc.documentelement,//HTML //The Orientationchange event is an event that is triggered when the user horizontally or vertically flips the device (that is, the direction changes). resizeevt= (' Orientationchange 'inchWin)? ' Orientationchange ': ' Resize ', Recalc=function(){ varClientWidth = El.clientwidth;//clientwidth: Gets the width of the object's visible content, excluding scroll bars, excluding borders; if(!clientwidth) {return;} El.style.fontSize= 16* (clientwidth/375) + ' px '; } //Console.log (EL); if(!doc.addeventlistener) {return;} //the AddEventListener event method accepts three parameters: the first is the event name, such as Click event OnClick, //The second is the function to execute, and the third is a Boolean valueWin.addeventlistener (Resizeevt,recalc,false); //Bind browser zoom and load timeWin.addeventlistener (' domcontentloaded ', Recalc,false);}) (document, window);View Code
REM Program II
Introducing Flexible.js, you do not need to include viewport tags in the HTML structure.
Flexible.js adds a DATA-DPR attribute to the For example, 2 or 3 will also add the corresponding Font-size value to the HTML,
For example, 75px, and add viewport tags, JS will be based on different devices to add a different zoom ratio (recommended inline processing, before all resources to execute this JS)
H5 Mobile End adaptation scheme
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
