rem简单实现移动端适配

rem：移动web开发

  • 默认字体大小是16px

  • 在<html>中设置字体大小

  • 与em的区别：

    • em是在父级设置字体大小受影响

  • 移动端适配

    • 首先获取屏幕的宽度

    • 计算当前屏幕宽度和640的比例

    • 计算出font-size的值

    • 改变html的font-size的值

<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
	<meta charset="UTF-8">
	<title>rem</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		div {
			width: 6.4rem;
			height: 6.4rem;
			background-color: pink;
			font-size: .14rem;
			margin: 0 auto;
		}
		p {
			width: 50%;
			height: 50%;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div>
		<p>这是一个p</p>
	</div>
</body>
</html>

  • 第一种：

    window.onresize = function(){
	var html = document.getElementsByTagName('html')[0];
	var width = html.offsetWidth;
	console.log(width);
	html.style.fontSize = (width>=640?640:width)/640*100 + 'px';
};

  • 第二种：

         var html = document.getElementsByTagName('html')[0];
     if(html){
         var w = window.innerWidth;
         var fontSize = (w>640?640:w)/640 * 100;
         html.style.fontSize = fontSize + 'px';
     }
     window.onload = function(){
         window.onresize = function(){
             var w = window.innerWidth;
             console.log(w);
             var fontSize = (w>640?640:w)/640 * 100;
             html.style.fontSize = fontSize + 'px';
         }
     }

https://github.com/PaddyWang/summarize

posted @ 2016-03-26 23:54  PaddyWang  阅读(224)  评论(0)  编辑  收藏  举报