移动端适配之终极适配方案rem适配

前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题!这次这个rem终极适配方案,是目前移动端的较为完美的适配方案!

简单介绍一下这个rem适配

px  固定值,设置多少就是多少不随屏幕大小改变 em  相对于自身字体大小 font-size:12px;  1em=12px em引发问题  1.chrome浏览器下规定字体最小12px 2.如果两个元素的字体规格不一样就是分别就行设置,不方便设置 rem:css3新增的相对单位,相对于根节点(html)字体设置 html{ font-size:12px; } 1rem=12px,5rem=60px;

首先要去设置这个html(根节点的字体大小),rem是根据这个根节点的字体大小进行适配!

当然去适配的时候这个根节点的大小如何设置才能更好适配呢?这个就是问题,那么就要去动态设置这个根节点大小

<script>
/*动态根据屏幕大小进行设置相对的根节点字体大小
 * 
 * */
var html=document.documentElement;
var width=window.screen.width;
//以当前设备宽度16分之一为当前根节点
html.style.fontSize=width/16+'px';
</script>

或许有疑问这个16怎么而来的,这个16是任意设置的,设置16是一iphone5为例,独立设备像素的320为例,每一小份是20px,则在ip5下,根节点1rem=20px 那么这个px转rem怎么进行转换

可以使用rem简单搞定!

less文件

@rem:20rem;
.box{
    width:180/@rem;
    height:245/@rem;
    background-color: hotpink;
}

在iphone5下,1/16代表20px,那么在less文件中的声明的rem变量就为20rem(代码需要设置的像素/这个20px),width:180/@rem,在iphone6下显示为宽度180px,则自动换算对于rem; 当然rem与px的转换在hbulider的设置内也可以设置相互转换;