viewpoint

css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。

“viewpoint” = window sizevw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, 最小1vmax = 1vw or 1vh, 最大

兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+

DEMO地址：  （已经用JS修正重绘bug）

          
                   
     
              我是靖鸣君 我是靖鸣君 我是靖鸣君    
     

但是该方案存在一个bug，上面的代码，当浏览器窗口变化的时候，box中的文字并没有按照应有的比例变化，但是css3标准中是这么说的：

When the height or width of the viewport is changed, they are scaled accordingly.

 

插曲

像这样的问题，我之前也遇到过，比如以下代码：（小插曲，可跳过）

 

DEMO地址：　　

box的宽度设置为900px，wrap设置为100%；缩小浏览器窗口，当宽度小于900时会出现滚动条，向右滚动，会发现蓝色部分并不是100%，这个问题大家可以去思考下。

 

bug处理

回到上面的问题，font-size:4vw，应该会使得字体的大小变化，可是他没有，和标准说的不一样，所以可以认为是一个bug。

window.onresize = function(){    var box = document.getElementById("box");    box.style["z-index"] = 1;}

 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.color = "blue"; // 再一次重绘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处理相当简单，不知道大家还有没有其他比较好的方案，可以提出来交流下~

 

参考文档

  *