字体大小自适应纯css解决方案【转】

2020-03-05 16:01:03来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

字体大小自适应纯css解决方案【转】

viewpoint

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

“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+

<!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>
    <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>

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?实现平滑转变

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处理相当简单,不知道大家还有没有其他比较好的方案,可以提出来交流下~

参考文档

Viewport Sized Typography

文章来自:https://blog.csdn.net/dyllove98/article/details/9246397


原文链接:https://www.cnblogs.com/KillBugMe/p/12419361.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS3实现清新Loading效果的实例

下一篇: children和childNodes差异【转】