html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序：通常我们只能控制div的宽度 而不能控制高度，在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例
一，背景：目前移动端大多数图片或视频列表页面的显示，列出几个
可以看出这几个页面都有一个共同点 都有图片 双列 列表单个模块的高度相同 我查看了下他们的源码 都是将图片设置为固定高度 然后将li撑开 li的宽度设置为50% 然后float：left 然后用媒体查询使之响应
二 探索
于是我在想 怎么能先设置好li的宽高度 不由图片来控制呢 但是这就存在个问题 我们只能用百分比来设置宽度 高度还是要写死 这依然没有意义 还是要用到媒体查询来更改高度
于是我想到了getComputedStyle 这个属性 他是通过后期计算得出页面上某个元素的样式 那么这样 我们就可以 先设置好宽度 比如50% 然后通过getComputedStyle 获取这个宽度 然后赋值给这个元素的高度
这就成了一个正方形。下来实战一把
三 实战
我们的目的是：双列居中显示正方形 且跟随分辨率大小或浏览器大小等比缩放
1.搭个html框架
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta content="yes"name="apple-mobile-web-app-capable"/> <meta content="black"name="apple-mobile-web-app-status-bar-style"/> <meta name="format-detection"content="telphone=no"/> <link rel="stylesheet" href="css/style.css"> <title>html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计</title> </head> <body> <div class="test"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
<scirpt src="js/zepto.js"></script>
</body> </html>
2. css
*{ margin: 0; padding: 0;}
.test{ width: 100%; }
ul{ width:96%; margin: auto;}
ul:after{ content: "."; visibility: hidden; height: 0; clear: both; display: block;}
ul li{ width: 49%; margin-top: 10px; background: rgb(230,34,57); list-style: none;}
ul li:nth-child(even){ float: left;}
ul li:nth-child(odd){ float: right;}
css 让li的奇数左浮动 偶数右浮动 达到居中的效果 这样可以不用使用margin 因为margin可能会不准 等分最好的方式是flex 但我们这里只考虑双列所以不用flex
3.js
先要写一个获取计算后的样式的函数
function getComStyle(elem, style) { var node = document.getElementsByTagName(elem)[0]; var theStyle; if (window.getComputedStyle) { //如果window有getComputedStyle这个属性 var styleObj = window.getComputedStyle(node, null); //第二个参数是获取伪元素的样式 设置null就是不获取 styleObj是一个包含各种样式属性的对象 theStyle = styleObj.getPropertyValue(style); //getPropertyValue获取元素css指定的属性值 } else { //ie theStyle = node.currentStyle; } return theStyle; }
这里的两个参数分别代表 想要获取样式元素 style是你想要获取的样式 比如我们此刻想获取的是width
接下来我们写主函数设置
$(function(){ var width = getComStyle("li", "width"); $(".test ul li").height(width); })
效果perfect 我们没有设置li的高度 但是现在 他已经有高度了 li成了一个正方形
但是 出了一个问题 当我改变浏览器的宽度时 他的高度并没有响应
这不是我想要的结果 仔细想 因为当浏览器的宽度改变了 必须要有监听才能使之做出响应的改变 于是想到了 resize 这个函数是当window窗口发生改变时触发
$(window).resize(function(){ var width = getComStyle("li", "width"); $(".test ul li").height(width); })
这下好了 浏览器的宽度改变时 我们依然可以获取宽度 并赋值给高度
四 发散
既然我们可以让他成为正方形当然也可以让他成为长方形 或者任何我们想要的方形 于是我们再写一个可以控制高度的函数
function controlH(width,n,ele){ newW=parseInt(width.replace("px","")); var height=newW*n; $(ele).height(height); }
这三个参数分别为 获取元素的宽度width， 想要设置高度为宽的倍数n ，元素ele
完整的js
var i = 0; //主函数 $(function() { var width = getComStyle("li", "width"); $(".test ul li").height(width); controlH(width, 0.8, "li"); }) //窗口改变时触发 $(window).resize(function() { var width = getComStyle("li", "width"); i++ controlH(width, 0.8, "li"); console.log(i); }) //获取元素宽度 function getComStyle(elem, style) { var node = document.getElementsByTagName(elem)[0]; var theStyle; if (window.getComputedStyle) { var styleObj = window.getComputedStyle(node, null); theStyle = styleObj.getPropertyValue(style); } else { //ie theStyle = node.currentStyle; } return theStyle; } //设置元素高度 function controlH(width, n, ele) { newW = parseInt(width.replace("px", "")); var height = newW * n; $(ele).height(height); }
controlH(width, 0.8, "li")情况下的页面显示
controlH(width, 1, "li") 页面显示
controlH(width, 1.5, "li") 页面显示
