做網頁時，我們通常需要考慮到不同電腦屏幕尺寸，以及不同手機屏幕大小等問題，解決樣式發生改變的情況，那么如何解決呢？現在主要是采用自適應來解決高度，寬度的，以及圖片自適應問題，下面就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.兩欄布局，左邊固定，右邊寬度自適應

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表