做網頁時,我們通常需要考慮到不同電腦屏幕尺寸,以及不同手機屏幕大小等問題,解決樣式發生改變的情況,那么如何解決呢?現在主要是采用自適應來解決高度,寬度的,以及圖片自適應問題,下面就PC端和移動端來總結一下,通常進行自適應高度和寬度,圖片時,一般與頁面的布局存在關系。
1、最小尺寸分辨率1024*768(傳統17寸顯示器),則可以采用940px、960px、或者常用的980px作為最小寬度
2、1024*768之后稍大的分辨率就是1280*768了,則可以采用1200px或者1220px作為稍大的網頁寬度
3、支持css3、html5的高級瀏覽器可以利用CSS3 Media Queries讓網頁在不同分辨率下自動調節布局標簽
4、不支持css3、html5的腦殘瀏覽器特別是<=ie8系列則需要用js以及resize事件來控制html的布局標簽寬度了
5、寬度自適應需要對每個顯示模塊進行不同寬度的計算,在做html布局時需要大量的計算與適配。
6、寬度自適應為不同寬度顯示器寫布局元素時常用的css
下面我們看下,如何用js和css來自適應屏幕的大小。
一:了解高度和寬度的基礎
下面用圖片來說明:
網頁可見區域高寬為:document.body.clientHeight||document.body.clientWidth
網頁正文的區域高寬為:document.body.scrollHeight||document.body.scrollWidth(包括滾輪的長度)
網頁被卷去的上左區域:document.body.scrollTop||document.body.scrollLeft
二: css自適應高度
1.兩欄布局,左邊固定,右邊寬度自適應
|
新聞熱點
疑難解答