rem适配移动端

rem布局 的适配 ？

***类似做不同屏幕尺寸的适配  设置根字体节点大小即可   特殊屏幕均可单独做适配***
@mediascreen and (max-width: 320px) {
body{font-size: 14px;}
}

@mediascreen and (min-width: 321px) and (max-width: 413px) {
body{font-size: 16px;}
}

@mediascreen and (min-width: 414px) and (max-width: 639px) {
body{font-size: 17px;}
}


@mediascreen and (min-width: 640px) {
body{font-size: 18px;}
}

媒体查询与rem

rem与媒体查询一起使用   通常我们自己需要手动配置设计图的尺寸大小与需要的基准值
需要引入flexible.js插件做适配

例:一般设计图的尺寸为750px

var design = 750;  这里预设设计图的尺寸
var base  =  50  ; 设置基准值  



var size = width /design *base  rem