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 地址:http://qianduannotes.sinaapp.com/test/fontResize.html (已经用 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> <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.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 实现平滑转变
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; }}
我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注 * 如 px, pt, em)只是相对于 HTML 根元素的大小而自动改变,而不是相对于用户的屏幕。
在上网查询之后我发现一种新的字体大小单位,叫做:Viewport-Percentage Lengths.
我是在一 MDN 的一篇文章中发现这个 Viewport-percentage lengths 的,这正是我要找的东西,我只是不知道它叫什么。
它是怎么工作的?
其实非常简单。一个单位相于当前视图窗口大小的 1%,宽度和高度是不同的,分别用 (vw, vh) 表示。你可以通过 vmin 和 vmax 设置最大最小值。
1vw = 当前视图窗口(viewport)1% 的宽度
1vh = 当前视图窗口(viewport)1% 的高度
1vmin = 1vw 或 1vh, 取决于哪个更小一点
1vmax = 1vw 或 1vh, 取决于哪个更大一点
如果当前视图窗口宽度是 100 毫米,那么 5vw 就是 5 毫米。
vmin 和 vmax 的设置就像这样:
section { width: 100vmin; background-color: #ff5442; }
示例
这里有一份完整的示例 2
注 * Bootstrap 之类的响应式布局 CSS 框架多采用 @media (max-width: *) {} 之类响应式样示实现。
// 屏幕宽度小于 767 个象素时应用的 CSS 样式
@media (max-width: 767px) {
//CSS 代码
}
// 屏幕宽度在 767 和 991 象素之间的 CSS 样式
@media (min-width: 768px) and (max-width: 991px) {
//CSS 代码
}
此法在大小在跨过临界值时才会发生改变。而 vh,vw 这样的单位会随窗口大小而立刻发生改变。
viewpoint
css3 提供了一些与当前 viewpoint 相关的元素,vw,vh,vim 等。
“viewpoint” = window size