vh单位模拟office word效果

来源：互联网发布：mysmartcamera监控软件编辑：程序博客网时间：2024/06/03 23:03

今天早上在学习圣杯布局的时候遇到了vw和vh，一开始我并不知道vw和vh是什么，后来查了一些资料才明白。

vw 相对于视窗的宽度：视窗宽度是100vw；

即1vw = (1/100) * 视窗的宽度。

vh 相对于视窗的高度：视窗高度是100vh；

即1vh = (1/100) * 视窗的高度。

视窗指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

vw和vh是CSS中的长度单位，只是比较少见。

我在这里用vh来实现了一个Office Word的效果。

相关的html代码如下：

<page data-page="第1页，共3页"></page><page data-page="第2页，共3页"></page><page data-page="第3页，共3页"></page>

我在这里手工设置了page的data-page属性。

JavaScript代码为创建data-page属性值，如下：

(function(){    if(typeof window.screenX === "number"){       var elePages = document.querySelectorAll("page"),lenPage = elePages.length;       for(var i=0;i<lenPage;i+=1){         elePages[i].setAttribute("data-page","第 "+ (i+1)+" 页，共"+lenPage+" 页");       }    }else{      alert("浏览器太老了！");    }})();

screenX和screenY属性返回窗口相对于屏幕的X和Y坐标，document.querySelectorAll("page")查找页面所有page标签，返回的是一个集合。

相关的css代码如下：

page {    display: block;    height: 98vh;    width: 69.3vh;    margin: 1vh auto;    padding: 12vh;    border: 1px solid #646464;    box-shadow: 0 0 15px rgba(0,0,0,.75);    box-sizing: border-box;    background: url(office/bl.png) no-repeat 8vh 88vh,                url(office/br.png) no-repeat 59vh 88vh,                url(office/tl.png) no-repeat 8vh 8vh,                url(office/tr.png) no-repeat 59vh 8vh;    background-color: white;    position: relative;}page:after {    content: attr(data-page);    color: graytext;    font-size: 12px;    text-align: center;    bottom: 4vh;    position: absolute;    left: 10vh;    right: 10vh;}

box-shadow:0 0 15px rgba(0,0,0,.75);

参数解释：

第一个参数：水平阴影的位置；

第二个参数：垂直阴影的位置；

第三个参数：模糊距离；

第四个参数：阴影的颜色；

box-sizing: border-box;

触发怪异的盒模型，padding和border被包含在定义的width和height中。

background:url(office/bl.png) no-repeat 8vh 88vh;

参数解释：

第一个参数：图像源；

第二个参数：图片是否重复；

第三个参数：图片的水平位置；

第四个参数：图片的垂直位置；

content: attr(data-page);是非常重要的样式，在page里插入data-page属性的值。

因为vh和vw是相对于视窗的单位，所以用vh和vw来设置的长度并不是固定不变的，它会随着视窗大小的变化而变化。

项目源码：https://github.com/handsomeJs/css3vhvw。有需要的朋友可以下载来研究。

参考文献：http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

1 0