做乙個pc端的網頁,設計圖是1920x1080的. 要在常見屏上顯示正常(比例正確可) 1280x720 1366x768 1440x900 1920x1080
使用了幾種辦法
1.內容在一屏內顯示的,採用了(內容框)上下左右居中的辦法,裡面的內容絕對於這個內容框定位.這樣一來,在不同大小屏中,內容總是在中間,看起來較正常
2.使用rem的地方
width,height,margin,padding,left top都採用了rem,
html的font-size設定的為100px.是為了計算方便.此時body的font-size要設定為正常值,例如14px.不然的話,其它的dom都會繼承html的100px的font-size,導致效果巨大.
3.當瀏覽器視窗變化時,內容的大小以及相對位置也會相應變化,這個依靠js修改html的font-size值實現.如下:
$(window).resize(function ()// 繫結到視窗的這個事件中
let designsize = 1920; // 設計圖尺寸
let html = document.documentelement;
let ww = html.clientwidth;// 視窗寬度
let rem = ww * 100 / designsize;
document.documentelement.style.fontsize = rem + 'px';
計算font-size的邏輯是:
當設計圖是1920時,規定html的font-size的值是100. 也就是,當瀏覽器視窗調整到1920px時,1rem=100px,如果要設定乙個160px(1920設計圖時)的margin-top,那麼rem設定值是1.6rem.
當視窗調整到非設計圖的寬度如winwidth時,ht
PC端自適應使用rem
做乙個pc端的網頁，設計圖是1920x1080，要在常見屏上顯示正常 比如 1280x720 1366x768 1440x900 1920x1080。就要使用rem，width height margin padding left top都採用了rem,注意 html的font size設定的為10...
pc端rem適配 聊聊PC端頁面適配
目前pc並沒有像移動端那樣，可以用rem單位這種一站式解決方案，因為pc需要考慮低階瀏覽器，查詢和background size這些新屬性都不能用。設計稿 1920 1080 190 2.16 自己測1920 945 2.03 14寸普通筆記本 1366 768 190 2.36 參考 參考 登入考...
移動端PC端自適應
查詢 這段 的幾個引數解釋 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1.0 minimum scale 允許使用者縮放到的最小比例 預設設定為1.0 maximum scale 允許使用者縮放到的最大比例 預設設定為1.0 ...