Home > Developer > Web Develop
On the internet to see a lot of mobile adaptation of the various methods, due to the original work of REM negligence, so decided to re-learn rem~
Due to the particularity of the mobile side, this article is about how to use rem to achieve adaptive , or rem -responsive layout, by using a script can be REM adaptive , No need to worry about how to implement the adaptive problem for the different width of the equipment.
remis relative to the root element <html> , which means that we only need to determine an PX font size on the root element, then we can calculate the width of the element. 1REM=16PX (browser html pixels, you can set this benchmark value), if the browser's HTML is set to 64PX, then the following element is 1rem=64px to operate.
Ali team Open source of a library. Use Flexible.js to easily handle a variety of different mobile device compatible adaptive issues.
Here you find a lite version of the flexible.min.js that fits all the mobile side:
The code is as follows:
//designwidth: The actual width value of the design manuscript needs to be set according to the actual//maxWidth: The maximum width value of the manuscript, which needs to be set according to the actual//The last side of this JS has two parameters to be set, one for the actual width of the design, one for the maximum width of the manuscript, for example, the design draft is 750, the maximum width is 750, or (750,750);(function (Designwidth, maxWidth) {varDoc =document, Win=window, Docel=doc.documentelement, Remstyle= Document.createelement ("style"), Tid; function Refreshrem () {varwidth =docel.getboundingclientrect (). width; MaxWidth= MaxWidth | |540; Width>maxwidth && (width=maxWidth); varrem = width * -/Designwidth; Remstyle.innerhtml='html{font-size:'+ REM +'px;}'; } if(docel.firstelementchild) {docEl.firstElementChild.appendChild (Remstyle); } Else { varWrap = Doc.createelement ("Div"); Wrap.appendchild (Remstyle); Doc.write (wrap.innerhtml); Wrap=NULL; } //to wait until the Wiewport set up to perform Refreshrem, otherwise Refreshrem will execute 2 times;Refreshrem (); Win.addeventlistener ("Resize", function () {cleartimeout (TID);//prevent execution two timesTid = SetTimeout (Refreshrem, -); }, false); Win.addeventlistener ("Pageshow", Function (e) {if(e.persisted) {//recalculate when the browser is backcleartimeout (TID); Tid= SetTimeout (Refreshrem, -); } }, false); if(Doc.readystate = = =" Complete") {doc.body.style.fontSize="16px"; } Else{Doc.addeventlistener ("domcontentloaded", Function (e) {doc.body.style.fontSize="16px"; }, false); }})( -, -);
How to use:·
1. Copy the above code to the front of the script tag on the head of your page.
2. According to the design size, adjust the last two parameter values inside.
3. Use 1rem=100px to convert the pixels of your design, for example, a block on the design is 100px*300px, and the conversion to REM is 1rem*3rem.
The above code, if in uc Browser horizontal screen and vertical screen conversion, found that the code does not Adaptive, the bug is resolved by:
has found a compatibility scheme, you can use JS in the head of the page to create a definition of HTML elements font-size style elements to solve! As follows: <style id= "Rootfontsize" >html{font-size:100px!important;} </style> note also added important to increase the weightThis version of the code differs from the REM conversion method of the hand scouring. The conversion of 1rem=100px is used.
If you have a block that is. box{width:120px;height:80px;} to REM is. box{width:1.2rem; height:.8rem;}
Basic HTML templates ·
You can also copy the underlying HTML template directly below.
<! DOCTYPE Html>"Utf-8"><meta content="Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"Name="Viewport"><meta content="Yes"Name="apple-mobile-web-app-capable"><meta content="Black"Name="Apple-mobile-web-app-status-bar-style"><meta content="Telephone=no"Name="format-detection"><meta content="Email=no"Name="format-detection"><meta name="Description"Content="no more than 150 characters"/><meta name="keywords"Content=""/><meta content="Caibaojian"Name="author"/><title> Front-end development blog </title><link rel="stylesheet"href="Base.css"><script type="Text/javascript">//introduce the Flexible.min.js!function (e,t) {function n () {varN=l.getboundingclientrect (). width;t=t| |540,n>t&& (n=t);varI= -*n/e;r.innerhtml="html{font-size:"+i+"px;}"}varI,d=document,o=window,l=d.documentelement,r=document.createelement ("style");if(L.firstelementchild) L.firstelementchild.appendchild (R);Else{varA=d.createelement ("Div"); A.appendchild (R), D.write (a.innerhtml), a=NULL}n (), O.addeventlistener ("Resize", function () {cleartimeout (i), I=settimeout (N, -)},!1), O.addeventlistener ("Pageshow", function (e) {e.persisted&& (cleartimeout (i), I=settimeout (N, -))},!1)," Complete"===d.readystate?d.body.style.fontsize="16px":d. AddEventListener ("domcontentloaded", function (e) {d.body.style.fontsize="16px"},!1)}( -, -);</script>BASE.CSS:
Body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;p adding:0;} Ul,ol{list-Style:none;} A{text-Decoration:none;} html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-Adjust:none;} Body{line-height:1.5; font-size:14px;} Body,button,input,Select, textarea{font-family:'Helvetica Neue', Tahoma,'Hiragino sans GB', Stheiti,'Wenquanyi Micro Hei', \5fae\8f6f\96c5\9ed1,\5b8b\4f53,sans-serif;} B,strong{font-Weight:bold;} I,em{font-Style:normal;} Table{border-collapse:collapse;border-spacing:0;} Table th,table td{border:1px solid #ddd;p adding:5px;} Table Th{font-weight:inherit;border-bottom-width:2px;border-bottom-color: #ccc;} Img{border:0None;width:auto\9; Max-width: -%;vertical-align:top; height:auto;} Button,input,Select, Textarea{font-family:inherit;font-size: -%;margin:0; vertical-Align:baseline;} button,html Input[type="Button"],input[type="Reset"],input[type="Submit"]{-webkit-Appearance:button;cursor:pointer;} Button[disabled],input[disabled]{cursor:default;} Input[type="checkbox"],input[type="Radio"]{box-sizing:border-box;padding:0;} Input[type="Search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;} Input[type="Search"]::-webkit-search-decoration{-webkit-Appearance:none;} Input:focus{outline:none;}Select[Size],Select[Multiple],Select[Size] [Multiple] {border:1px solid #AAA;p adding:0;} Article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;} Audio,canvas,video,progress{display:inline-Block;} Body{background: #fff;} Input::-webkit-input-speech-button {display:none}button,input,textarea{-webkit-tap-highlight-color:rgba (0,0,0,0);}To emphasize again:·
The last two parameters of the script need to be adjusted according to the size of your design manuscript.
});
"Recommended Articles"
Introduction of REM and EM: https://www.imooc.com/article/15239
REM Adaptive layout: http://caibaojian.com/flexible-js.html
Http://caibaojian.com/simple-flexible.html
REM Realization Hand-scouring: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
REM Adaptive js---flexible.min.js
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
