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'; } }