Html5中rem自适应的应用方式
2018-10-10 本文已影响0人
Deng_Ding
<!DOCTYPE html>
<html lang="en" id="htmlBox">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
font-size: 20px;
}
/* rem换算成px： 30px/20px=1.5rem
字体大小除以根字体大小
*/
.txt p{
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="txt">你好呀 今天是第五天</div>
</body>
<script type="text/javascript">
//获取根节点
var htmlBOX=document.getElementById("htmlBOX");
//获取屏幕宽度
var widthP=document.body.clientWidth;
//赋值
htmlBOX.style.fontSize=widthP/16+"px"; // 以Iphone5为准
</script>
</html>
总结：主要理解rem适配原理是基于根字体中font-size的大小而做改变。
以原本的像素转换为rem单位，配合js查询屏幕大小的功能来改变html的font-size，
最终做出所谓的完美自适应。
