網頁大小自適應方案

2022-09-04 11:09:09 字數 749 閱讀 8558

優點:寬度之間無縫銜接, 操作起來也相對比較方便。

缺點:字型大小需要另外一套自適應方法來調整;當螢幕寬度大於700px後,繼續按照百分比元素會偏大,這個時候調整起來會比較麻煩。

優點:可以根據不同螢幕寬度來設定,可以完美解決上面說的螢幕偏大時的比例問題。字型的大小也不存在問題。

缺點:根據寬度區間來設定,無法實現無縫變換。

在參考**網的自適應方法時,偶然發現頁面的fontsize會根據螢幕的寬度自動調整,而且螢幕寬度和所設字型大小的商是一定的。

於是猜想它是用js獲取螢幕寬度後,按照固定比例縮小後作為rem的單位長度實現自適應。

js**寫起來非常簡單,而且完美解決了用rem來設定無法達到無縫銜接的問題。

但移動端測試後問題就出現了,移動端safari在html載入完畢之前將js以迅雷不及掩耳盜鈴之勢執行了,在頁面沒有按照viewport設定好寬度前,js就讀取了錯誤的寬度,導致元素變成原來的兩倍大0^0, 需要用settimeout()解決問題。

最終**:

zepto(function($);

//防止在html未載入完畢時執行,保證獲取正確的頁寬

settimeout(function(), 200);

});

移動端網頁大小自適應方案

優點 寬度之間無縫銜接,操作起來也相對比較方便。缺點 字型大小需要另外一套自適應方法來調整 當螢幕寬度大於700px後,繼續按照百分比元素會偏大,這個時候調整起來會比較麻煩。優點 可以根據不同螢幕寬度來設定,可以完美解決上面說的螢幕偏大時的比例問題。字型的大小也不存在問題。缺點 根據寬度區間來設定,...

網頁背景自適應大小

前幾天在做乙個網頁想把乙個解析度比較大的乙個背景自動適應視窗大小,但是網上搜了下大都是使用 js控制網頁背景隨視窗大小自動適應的,而且大都效果不理想,最後終於找到了乙個簡單的辦法 本來是想看看css能不能實現背景自動適應視窗的的,但是可惜的是在css2中,背景圖的大小在樣式中 是不可控的,比如要想使...

網頁自適應電腦螢幕大小

1.網頁寬度自適應,需要把網頁元素寬度設定為百分比,還要在網頁頭部加上 width device width 寬度等於裝置螢幕的寬度 initial scale 1.0 表示 初始的縮放比例 minimum scale 0.5 表示 最小的縮放比例 maximum scale 2.0 表示 最大的縮...