序：通常我們只能控制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") 頁面顯示
