移动端基础之适配

mnblue
mnblue 发布于 2017-01-10 17:17:38 浏览:259 类型:原创 - 随笔 分类:手机移动 - 移动端 二维码: 作者原创 版权保护
1.百分比适配
   弊端:height无法设置

2.viewport 适配
       原理:就是用js把所有设备的viewport设置成一样的
      
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
(function(){
	var w = window.screen.width;
	var targetW = 320;
	var scale = w/targetW; //当前尺寸/目标尺寸
	var meta = document.createElement("meta");
	meta.name = "viewport";
	meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
	document.head.appendChild(meta);
})();
</script>
<style type="text/css">
	body {margin: 0;}
	div {	width: 80px;height: 100px;	float: left;}
	.box1 {background: red;	}
	.box2 {background: blue;}
	.box3 {	background: green;}
	.box4 {background: yellow;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

     
3.rem适配

1rem=根节点的字体大小
动态设置根节点的字体大小

<script>
		    (function(){
		    	var html = document.documentElement;
		    	var hWidth = html.getBoundingClientRect().width;
				html.style.fontSize = hWidth/15 + "px";
		    })()
		</script>
上例以750px的设计图为例,1rem=50px;

z
给个赞 0 人点赞
收藏 0 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
mnblue mnblue 作者

作者最新