CSS3⾃适应字体⼤⼩（vwvh）
viewpoint
css3提供了⼀些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。
“viewpoint” = window size
vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最⼩
1vmax = 1vw or 1vh, 最⼤
兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+
DEMO地址：（已经⽤JS修正重绘bug）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
#box { font-size: 4vw;}
</style>
</head>
<body>
<div id="box">
我是靖鸣君我是靖鸣君我是靖鸣君
</div>
</body>
</html>
但是该⽅案存在⼀个bug，上⾯的代码，当浏览器窗⼝变化的时候，box中的⽂字并没有按照应有的⽐例变化，但是css3标准中是这么说的：When the height or width of the viewport is changed, they are scaled accordingly.
插曲
像这样的问题，我之前也遇到过，⽐如以下代码：（⼩插曲，可跳过）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Demo</title>100种不同的字体
<style type="text/css">
body, div { margin:0; padding: 0;}
.wrap { background: blue; width: 100%;}
.box { width: 900px; height: 200px;}
</style>
</head>
<body>
<div class="wrap"><div class="box"></div></div>
</body>
</html>
DEMO地址：
box的宽度设置为900px，wrap设置为100%(~~这个百分⽐是相对于viewport的)；缩⼩浏览器窗⼝，当宽度⼩于900时会出现滚动条，向右滚动，会发现蓝⾊部分并不是100%，这个问题⼤家可以去思考下。
bug处理
回到上⾯的问题，font-size:4vw，应该会使得字体的⼤⼩变化，可是他没有，和标准说的不⼀样，所以可以认为是⼀个bug。
var box = ElementById("box");
box.style["z-index"] = 1; //显式的触发repaint
}
z-index可以对应的元素被重绘（repaint）。
延伸⼀点点关于重绘（repaint）和回流（reflow）的知识：
1. 添加、删除元素(回流+重绘)
2. 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
3. 移动元素，⽐如改变top,left(jquery的animate⽅法就是，改变top,left不⼀定会影响回流)，或者移动元素到另外1个⽗元素中。(重绘+回流)
4. 对style的操作(对不同的属性操作，影响不⼀样)
5. 还有⼀种是⽤户的操作，⽐如改变浏览器⼤⼩，改变浏览器的字体⼤⼩等(回流+重绘)
让我们看看下⾯的代码是如何影响回流和重绘的:
var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再⼀次回流+重绘
s.backgroundColor = "#ccc"; // 再⼀次重绘
s.fontSize = "14px"; // 再⼀次回流+重绘
// 添加node，再⼀次回流+重绘
关于重绘和回流
其他⽅案
1. css expression，这个效率⽐较低，不推荐使⽤
#box { star:expression(onresize = function(){
var res = parseInt(this.style.width) / 20;
res = res < 9 : "9px" ? res + "px";
this.style.fontSize = res;
});
}
//P.S：上⾯代码没测试，不知道写错没有
与其说⽤的css，还不如说是JS，⽽且是效率不够的JS。
2. media query，这东西也不是特别好⽤
h2{
font-size:25px
}
@media screen and (max-width: 850px){/* 可视区域⼩于 850px, 设置更⼩font-size属性 */
h2{
font-size:19px;
}
}
⽤media query会使得字体的变化出现不连贯性，⽽且要可能设置多个@media，相当⿇烦。
3. media query + -webkit-transition 实现平滑转变
DEMO地址：
div{
font-size: 40px;
-webkit-transition:font-size 0.2s ease-out;
}
@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
@media only screen and (max-width: 800px) { div{ font-size: 35px; }}
@media only screen and (max-width: 700px) { div{ font-size: 34px; }}
@media only screen and (max-width: 600px) { div{ font-size: 33px; }}
@media only screen and (max-width: 500px) { div{ font-size: 32px; }}
@media only screen and (max-width: 400px) { div{ font-size: 31px; }}
@media only screen and (max-width: 300px) { div{ font-size: 30px; }}
⼩结
这玩意⼉其实也没太⼤作⽤，⽤JS处理相当简单，不知道⼤家还有没有其他⽐较好的⽅案，可以提出来交流下~
-----------------------------------------------------------------
4. rem + js
px：绝对单位，页⾯按精确像素展⽰
em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃⾝定义了font-size按⾃⾝来计算（浏览器默认字体是16px），整个页⾯内1em不是⼀个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体⼤⼩来计算，CSS3新加属性，chrome/firefox/IE9+⽀持。
(另外需注意chrome强制最⼩字体为12号，即使设置成 10px 最终都会显⽰成 12px，当把html的font-size设置成10px,⼦节点rem的计算还是以12px为基准，所以⽹上很多⽂章提到的将html的font-size设为10⽅便计算不是那么可取)。
rem在移动端应⽤可参考淘宝的页⾯ (html的font-size通过动态计算获取)
页⾯基准320px(20px),html font-size值的计算：
[javascript]
1. var ElementsByTagName("html")[0],
2.      size=document.body.clientWidth/320*20;
3. ele.style.fontSize=size+"px"
注：需设置meta缩放⽐1:1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗⾼度，1vh等于视窗⾼度的1%。
vmin：vw和vh中较⼩的那个。
vmax：vw和vh中较⼤的那个。
vw, vh, vmin, vmax：IE9+局部⽀持，chrome/firefox/safari/opera⽀持，ios safari 8+⽀持，android browser4.4+⽀持，chrome for android39⽀持
其它的单位还有：
%：百分⽐
in:⼨
cm：厘⽶
mm：毫⽶
pt:point，⼤约1/72⼨
pc:pica，⼤约6pt，1/6⼨
ex：取当前作⽤效果的字体的x的⾼度，在⽆法确定x⾼度的情况下以0.5em计算(IE11及以下均不⽀持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)
ch：以节点所使⽤字体中的“0”字符为基准，不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+⽀持)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。