在css中vw和vh分别代表所占的百分比，可以设置最外部的容器的宽高，但是都要结合百分比一起使用。
展示
回到相关文章 »
图片宽度（目前1024像素）： 128 1024
点击我出现图片弹框
立即学习“前端免费学习笔记（深入）”；
代码
CSS代码：
.dialog_container {
display: none;
width: 100%;
width: 100vw;
height: 100%;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog_container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog_box {
display: inline-block;
border: 1px solid #ccc;
text-align: left;
vertical-align: middle;
position: relative;
}
.dialog_title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog_close {
position: absolute;
top: 5px;
right: 5px;
}
.dialog_body {
background-color: #fff;
}
.demo_image {
-webkit-transition: width .3s;
-moz-transition: width .3s;
transition: width .3s;
}
HTML代码：
JS代码：
(function() {
if (typeof window.screenX === "number") {
var $ = function(selector) {
return document.querySelector(selector);
};
// 元素们
var eleWidth = $("#imageWidth"), eleRange = $("input[type='range']"), eleBtn = $("#testButton"),
eleDialog = $("#dialogContainer");
eleBtn.addEventListener("click", function() {
$("#dialogBody img").style.width = eleRange.value + "px";
eleDialog.style.display = "inline";
});
eleRange.addEventListener("click", function() {
eleWidth.innerHTML = this.value;
$("#dialogBody img").style.width = this.value + "px";
});
$("#dialogClose").addEventListener("click", function() {
eleDialog.style.display = "none";
return false;
});
} else {
alert("您现在使用的浏览器内力不足，为防止走火入魔，建议使用IE9+或Chrome 20+浏览器~~");
}
})();
