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

时间 2019-12-13

标签字体大小自适应 css 解决方案栏目 CSS 繁體版

原文原文链接

viewpoint

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

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

DEMO地址：http://qianduannotes.sinaapp.com/test/fontResize.html （已经用JS修正重绘bug）node

<!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标准中是这么说的：jquery

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

插曲

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

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

DEMO地址：http://qianduannotes.sinaapp.com/test/paintBug.htmlchrome

box的宽度设置为900px，wrap设置为100%；缩小浏览器窗口，当宽度小于900时会出现滚动条，向右滚动，会发现蓝色部分并非100%，这个问题你们能够去思考下。express

bug处理

回到上面的问题，font-size:4vw，应该会使得字体的大小变化，但是他没有，和标准说的不同，因此能够认为是一个bug。vim

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地址：http://qianduannotes.sinaapp.com/test/fontResize2.html

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处理至关简单，不知道你们还有没有其余比较好的方案，能够提出来交流下~