谈谈h5页面中的rem

rem实现思路

 

rem单位是基于html标签的font-size来进行计算的，默认情况下1rem=16px,有些浏览器默认字体是12px，1rem=12px;在移动端通过设置不同的font-size来实现页面整体布局的缩放自适应。原理性的东西不做过多的赘述，网上各位大手都介绍的很详细了，下面就说说在实际中怎么确定font-size来进行h5页面的开发。

 

• 计算方法(一)

确定一个屏幕划分的份数n，如何设定screenWidth=10n;n=screen/10

比如现在的设计图宽度是750px，那么1rem=75px；现在设计图里面的一个div宽度为200px那么此div对应的宽度为：200/75=2.67rem,但是这样会导致我们在进行开发的时候每次都要计算rem的值，如果使用scss不存在这样的问题对应的计算代码为：

 

browser-default-font-size: 75px !default;//变量的值可以根据自己需求定义

 

html {

font-size: $browser-default-font-size;

}

 

@function pxTorem($px){//$px为需要转换的字号

@return $px / $browser-default-font-size * 1rem;

}

 

 

然后div样式就是:

div{

width:$pxTorem(200)

}

 

如果不使用scss又想有简单的计算方式，参考第二种方法：

 

 

 

• 计算方法（二）

固定100px等于1rem，然后div为200的就是2rem，175px的就为1.75rem

看一下rem计算原理

在750px的设计图下面1rem=100px,即font-size=100px

 

W fontsize

750px 100px

W ?

 

 

?=(W*100/750)px

 

 

这样就保证了无论设计图的宽是多少我100px就是1rem,这样的就得要求设计图的宽度必须是750px否则会导致问题当在ipnone6下面font-size为

375*100/750=50px;

 

解决上面一个问题，如果设计图比较奇葩偏偏不是750px我们就不能用了吗？(打死设计)

当然不是！上面格式?=(W*100/750)px其中我们把750作为一个变量自己指定不就可以了吗？

 

/**

*designW为设计图的宽度

**/

function getRem(designW){

var fts=window.innerWidth*100/designW;

document.documentElement.style.fontSize=fts

 

}

 

当然前面所有计算的大前提是要设置viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>

经过上面的一顿操作就可以愉快的进行coding了。另外推荐使用vw,vh进行手机页面的开发，用起来很爽。