pc端頁面適配思路

2022-07-09 15:03:15 字數 903 閱讀 7513

對於pc端網頁的適配，筆者大體的適配方法就是在整體布局div時，盡量讓width、height都使用百分比方式，而對於內部div，以及元素之間的margin、padding、width、height等屬性，使用rem來進行適配。直接貼**說明原理。

let designsize = 1920; // 定義設計圖大小，就是最終要適配的螢幕寬度


let html = document.documentelement;


let ww = html.clientwidth; // 獲取自己的瀏覽器視窗寬度


let rem = ww * 100 / designsize / 8; // 進行rem的換算，因為在實際展示中，在不同的尺寸的螢幕上design的寬度是變化的，所以rem是乙個動態變化的值，比如當前ww是1536（14寸筆記本螢幕大小），所以此時1rem就是10px，而到寬度為1920的螢幕上，此時rem就是12.5px，就會實現寬高自適應。


document.documentelement.style.fontsize = rem + 'px'; // 讓根元素字型大小值變為相應rem值的大小
整體思路便是這樣，而要讓頁面渲染完成之前就要準備好這些配置，則需要乙個立即執行函式，完整**如下：

;


(function(win) 


win.addeventlistener('resize', function() , false);


win.addeventlistener('pageshow', function(e) 


}, false);


refreshrem();


})(window);
這個適配方法其實只能用於一些簡單頁面的適配，在一些複雜的，要求適配程度較高的頁面上還要結合flex布局來進行適配。

pc端rem適配 聊聊PC端頁面適配

目前pc並沒有像移動端那樣，可以用rem單位這種一站式解決方案，因為pc需要考慮低階瀏覽器，查詢和background size這些新屬性都不能用。設計稿 1920 1080 190 2.16 自己測1920 945 2.03 14寸普通筆記本 1366 768 190 2.36 參考 參考 登入考...

聊聊PC端頁面適配

目也pc端有適配的需求 目前我們pc專案的設計稿尺寸是寬度1920，高度最小是1080。適配目標 1.在不同解析度的電腦上，網頁可以正常顯示 2.放大或者縮小螢幕，網頁可以正常顯示 對於寬度的適配 對於寬度適配 首先設定html,body 然後我們可以把頁面分解為背景層 一般寬度都會大於1200px...

pc端頁面的適配

目也pc端有適配的需求 目前我們pc專案的設計稿尺寸是寬度1920，高度最小是1080。適配目標 1.在不同解析度的電腦上，網頁可以正常顯示 2.放大或者縮小螢幕，網頁可以正常顯示 對於寬度的適配 對於寬度適配 首先設定html,body 然後我們可以把頁面分解為背景層 一般寬度都會大於1200px...