div等元素位置自適應屏幕大小

珊妹今天給大家分享的是前端最低級且實用的技術,大家不論是開發還是面試都會經常碰見的問題的解決辦法:

#.我們開發時候,如果創建個div,可能會想讓它適應任何屏幕大小,因爲我們訪問時候的電腦或手機尺寸大小不一,本來在我們開發的機器上美觀的很,有時候我們的網站就會變得錯綜複雜,一盤散沙,下面就來提供幾種方法:

1.獲取屏幕窗口高度-其它元素高度:

var h = $(window).height()-$("#header").outerHeight(true); 

$("#div").css("height",h);

2.單位百分制:

一般我們開發PC端網站,單位都是用px像素,如果想實現自適應,我們還會用百分比來代替單位,這樣也會實現自適應佈局;

3.彈性佈局:

父元素設置:display:fixed;

子元素設置:  flex:1; //這個數值根據自己情況設置,如果只有一個子元素,則會佔用父元素的全部空間,多個子元素設置同一個數                         值,會平分父元素的控件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章