html5中的自适应字体
loverlucky 2016-02-24
在进行移动端页面的开发的时候，屏幕适配是很大的难题。在某些时候也会遇到字体的适配的问题。
要根据屏幕的大小来自动显示不同大小的字体，这样会有如下几种解决方案：
方案一：使用媒体查询来控制，针对不同的情况写不同的css，这样做的缺点就是要写很多的css，不好维护
方案二：使用viewport来实现，css3提供了vw，vh，vim等与viewport相关的单位。
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vm 或者 1vh 最小
1vmax = 1vm 或者 1vh 最大
案例如下：box2中的字体大小会根据屏幕的大小实时缩放。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Demo</title>
<style type="text/css">
#box { width: 160px; padding: 15px; font-size: 14px;}
#box2 { font-size: 4vw;}
</style>
</head>
<body>
<div id="box">
你好自适应，你好自适应，你好自适应
</div>
<div id="box2">
你好自适应，你好自适应，你好自适应
</div>
<script type="text/javascript">
window.onresize = function(){
var box2 = document.getElementById("box2");
box2.style["z-index"] = 1;
}
</script>
</body>
</html>
