移动端的开发和适配 rem

移动端的开发和适配

1.特点
相当于跑在手机端的web页面
跨平台
基于webview，webkit
更高的适配和性能要求
2.移动端适配方法

3.媒介查询

@media screen and (max-width:200px){}    //方式1
<link rel=”stylesheet” media=”screen and (min-width:992px) “> //方式2   
@media not screen//排除

4.Rem(font-size of root element )

• 根据页面根元素的字体大小
• 公式：字体大小/html字体大小=rem
• 例：html {font-size:62.5%} // 10px/16px*100%=62.5% 默认Font-size为16px,这里设置为10px，方便计算
  body{font-size:1.4rem} // 1.4 * 10=14px

5.动态修改font-size
javascript代码

//viewport视图宽度
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//html宽度
var htmlDom = document.getElementsByTagName("html")[0];

var htmlDom.style.fontSize = htmlWidth/10+"rem";

CSS代码

@function px2rem($px){
	$rem : 37.5px;
	return ($px/$rem) + rem;
}

为什么是$rem为37.5？
关于rem的基准值，也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的主要有以下几点原因：
1 由于我们所写出的页面是要在不同的屏幕大小设备上运行的
2 所以我们在写样式的时候必须要先已一个确定的屏幕来作为参考，这个就由我们拿到的视觉稿来定
3 假如我们拿到的视觉稿是以iphone6的屏幕为基准设计的
4 iPhone6的屏幕大小是375px，

rem = window.innerWidth  / 10

改变html的字体大小

window.addEventListener('resize',(e)=>{
	var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
	htmlDom.style.fontSize = htmlWidth/10 + 'px';
})

6.局限
但是rem也并不是万能的，下面也有一些场景是不适于使用rem的
1 当用作图片或者一些不能缩放的展示时，必须要使用固定的px值，因为缩放可能会导致图片压缩变形等。
2 再设置backgroundposition或者backgroundsize时不宜使用rem