移动端自适应布局与字体大小
vw, vh实现
vw：根据可视区的宽度来计算的，100vw相当于宽度为100%，10vw则相当于10%。
vh：根据可视区的高度来计算的，和vw换算方式一样。
font-size:10vw。如果浏览器可视区宽度为320px的话，那么字体大小为32px，以此类推。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>css实现移动端字体适配</title>
<style>
body {
margin:0;
}
.child {
width:100vw;
height:40vw;
line-height:40vw;
font-size:5vw;
text-align:center;
background-color: coral;
color:#fff;
}
</style>
</head>
<body>
<div class="child">Happy Ending</div>
</body>
</html>
缺点：
高度跟宽度都跟随设备大小变化，不能像响应式布局那样去控制最大宽度，最大高度，跟字体大小。
js实现设置html标签的font-size大小
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>js实现移动端字体适配</title>
<style>
body {
margin:0;
}
.par{
width:100%;
max-width:1400px;
min-width:180px;
margin:0 auto;
}
.child {
width:100%;
height:2rem;
line-height:2rem;
font-size:0.3rem;
text-align:center;
background-color:coral;
color:#fff;
}
</style>
</head>
<body>
<div class="par">
<div class="child">Happy Ending</div>
</div>
<script>
var fontSizeAuto = function (){
var viewportWidth = document.documentElement.clientWidth;
if(viewportWidth > 960){ viewportWidth = 1400; }
if(viewportWidth < 960 && viewportWidth > 640){ viewportWidth = 960; }
if(viewportWidth < 640 && viewportWidth > 320){ viewportWidth = 640; }
if(viewportWidth < 320 && viewportWidth > 180){ viewportWidth = 320; }
if(viewportWidth < 180 ){ viewportWidth = 180; }
document.documentElement.style.fontSize = viewportWidth/6.4 +'px';
}
fontSizeAuto();
window.onresize = fontSizeAuto;
</script>
</body>
</html>
