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
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
