說一下在一個應用中設置元素大小時用到的一些方法:
1.CSS3中的新單位即vw, vh:
#songList {display:none; position:fixed; bottom:0px;left:35%; height:50vh; width:30%; text-align:center;}
vw:則是相對於視窗的寬度,vh:相對於視窗的高度。
“視區”所指爲瀏覽器內部的可視區域大小,即window.innerWidth和window.innerHeight的大小,不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。
詳細用法可以參考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/
2.calc
left:calc(50% - 144px);
calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。例如,你可以使用calc()給元素的border、margin、pading、font-size、height和width等屬性設置動態值。之所以說是動態值,因爲這是我們使用表達式來得到的值。calc()最大的好處就是用在流體佈局上,可以通過calc()計算得到元素的寬度。