rem figma

Mobile REM Layout

On the Head tab, add:(function() { varb =navigator.useragent; ipad= B.match (/(IPad). *os\s ([\d_]+)/)?true:false; iphone=!ipad B.match (/(Iphone\sos) \s ([\d_]+)/)?true:false; UC= Navigator.userAgent.indexOf ("Ucbrowser") >-1?true:false; iOS= ipad | |iphone; varD = 1,a = 1, C; if(iOS) {if(Window.devicepixelratio >= 2) {D*= 0.5; A*= 2 } } Else { if(UC) {if(Window.devicepixelratio >= 2) {D*= 0.5; A*= 2} }} C= ' ; document.write (c); Document.documentElement.style.fontSize=

Calculation formula for EM: 1÷ The parent element's Font-sizex needs to convert the pixel value = em valueREM: is a unit of relative length. Calculates a multiple of a value relative to the root element (that is, the HTML element) font-sizeCompatibility: ie9.0+;firefox3.6+;chrome4.0+;safari5.0+;opera15.0+; IOS safari4.1+; Android browser2.1+; Android chrome18.0+Usage:Example: html{font-size:12px} p{font-size:2rem}//p font-size output 24px (12px*2 )Introduction to CSS3 's

function Resi () {var html = document.queryselector ("html"); var WW = Document.body.clientWidth | | Document.documentelement.clientwidth;var Maxw = 640;var minw = 320;if (ww > Maxw) WW = Maxw;var ratio = ww/minw;html. Style.fontsize = ratio + "px"}window.addeventlistener ("domcontentloaded", function () {var bodys = Document.querysele ctor ("Body"). Style;bodys.opacity = "1"; bodys.filter = "alpha (opacity=100)"; Resi ()}); Window.addeventlistener (" Resize ", resi);　　Mobile

1, with JS calculation　　2. Media Enquiry "@media"@media only screen and (max-width:320px) {html{font-size:9px;}} @media only screen and (min-width:320px) and (max-width:352px) {html{font-size:10px;}} @media only screen and (min-width:352px) and (max-width:384px) {html{font-size:11px;}} @media only screen and (min-width:384px) and (max-width:416px) {html{font-size:12px;}} @media only screen and (MIN-WIDTH:416PX) and (max-width:448px) {html{font-size:13px;}} @media only screen and (min-width:448px

1 Set the default character size first2 scss notation:@function t ($px) { @return $px/50px * 1rem;} P { width:t (20px);}3 Less notation:@r:50rem;p{ 20/@r;}4 after compiling:p { 0. 4rem;}Scss and less px turn REM

　　Mobile-side use of REM

(function () { function o () { = (document.documentElement.clientWidth )/31.25 + "px" } varnull; Window.addeventlistener (function () { = SetTimeout (o,!1) ), O () }) (window);Phone font size px-rem javascript conversion

directory is the font size is, then the 100px（100*（640/640）=100px） design Draft on a copy, then PS tells us that the font size is 24px, Then we will be in the page to the text set to 0.24rem, then the 640px page font is 24px.Then when we consider such as the page is 5/5s, then the current page size is 50px（100*(320/640)=50px） , then 0.24rem will be displayed in 12px size. and 640px wide design manuscript on the 24px font, in the 320px page, is the 12px display ~This is why to 100px as the base

html{font-size:20px;width:100%;height:100%;}body{margin:0;padding:0;}Mobile-screen Adaptive JS and REM

@media screen and (max-width:319px) {html {font-size:85. 33333px}} @media screen and (min-width:320px) and (max-width:359px) {html {font-size:85. 33333px}} @media screen and (min-width:360px) and (max-width:374px) {html {font-size:96px}} @media screen and (min-width:375px) and (max-width:383px) {html {font-size:100px}} @media screen and (min-WIDTH:384PX) and (max-width:399px) {html {font-size:102. 4px}} @media screen and (min-width:400px) and (max-width:411px) {html {font-size:106. 66667px}} @me

Determine whether a PC or mobileif (/applewebkit.mobile/i.test (navigator.useragent) | | (/midp| symbianos| nokia| Samsung| Lg| nec| tcl| alcatel| bird| dbtel| dopod| philips| haier| lenovo| mot-| nokia| sonyericsson| sie-| amoi| Zte/.test (navigator.useragent))) {if (Window.location.href.indexOf ("mobile") try{if (/android|webos|iphone|ipod| Blackberry/i.test (navigator.useragent)) {Cell phone}else if (/ipad/i.test (navigator.useragent)) {}else{Pc}}catch (e) {}}}Unit conversions:if (clientwidth

VW,VH are all units relative to the screen viewport.VW: The width relative to the viewport. The viewport is divided into 100 units of VW;VH: The height relative to the viewport. The viewport is divided into 100 units of VH;Vmax: The larger of the width or height relative to the viewport. One of the largest is the Vmax, which is divided into 100 units;Vmin: The smaller one relative to the width or height of the viewport. The smallest of them is divided into 100 units of vmin;After explaining the

REM is a unit of font-size size relative to the root elementNote inphone5 screen width is 320px font-size16px 1rem=16px utf-8" > Name= "viewport" content= "width=device-width,initial-scale=1.0" > app" > Class= "Test" > Class= "Hello" >hello wangyawei So we write the formula in JS 3 lines of code can be done You can see the perfect fit, and the font-size becomes 18.75pxREM-Match on mobile

Before doing desert education, direct to the design map, and then rape, scale processing. Simple. Straight, Rough! However, development is fast. ...... Once!But that is, now developed, as the industry conscience: can't do that! (That was forced.)First look at the code:@media screen and (max-width:362px) and (min-width:330px) {html{font-size:60%;}. top-banner{font-size:15px//}. btn-download{margin-left:5%;//}}@media screen and (max-width:330px) {html{font-size:53.333331%;}. top-banner{Font-size:1

Refresh ();Window.onresize = function () {SetTimeout (function () {Refresh ();},10)};function Refresh () {Let devicewidth = Document.documentElement.clientWidth;if (Devicewidth > 1200) {Document.documentElement.style.fontSize = 1200/12 + "px";} else {Document.documentElement.style.fontSize = devicewidth/7.5 + "px";Console.log (devicewidth/7.5+ "px");}}Mobile-adapted REM settings

Download lib-flexibleHttps://github.com/amfe/lib-flexiblelib-flexible --saveIntroduction of Lib-flexible in Main.jsimport ‘lib-flexible/flexible‘Installing Px2rem-loaderHttps://github.com/songsiqi/px2rem configuration Px2rem-loader Find Util.js in Build file, add Px2rem-loader to Cssloaders const px2remLoader = { loader: ‘px2rem-loader‘, options: { remUnit: 75 } }Changing the Generateloaders function functionGenerateloaders(loader, loaderoptions) { Const loaders = [Cssloader, Px2remloader,post

px Pixels (Pixel). Relative length units. Pixel px is relative to the display screen resolutionEM is the relative length unit. The font size relative to the text within the current object. If the font size of the current inline text is not artificially set, the default font size is relative to the browser.Em relative to the parent element!The default font height for any browser is 16px. All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. To simplify the convers

Add the following code to your page and you're done.function FontSize () {var view_width = document.getelementsbytagname (' html ') [0].getboundingclientrect (). Width;var _ html = document.getelementsbytagname (' html ') [0];view_width > 768? _html.style.fontsize = 768/375 + ' px ': _html.style.fontsize = view_width * 100/375 + ' px ';} FontSize (); window.onresize = function () {fontSize ();}　　Let a page fill the screen, add the following codevar htmlheigt=window.innerheight;var rebate_home=do

Typically, modulo operations (MoD) and remainder (REM) operations are confused, because in most programming languages, the '% ' notation is used to represent modulo or remainder operations. Here we want to remind you to pay attention to the specific meaning of the '% ' operator in the current environment, because in the case of negative numbers, the results are different. For integer number A,b, the method of modulo operation or remainder operation i