前端 移動端簡單了解

2022-08-09 23:18:29 字數 553 閱讀 4660

html檔案:rem和html有關   em和當前盒子有關

js**:注意在設定時當前設計的尺寸 和 自定義的換算 width為當前的尺寸,啟動會自動檢測

/*獲得頁面寬度後動態修改html上的fontsize

* 320為iphone5設計稿下的頁面寬度,如下設定後頁面的頁面在iphone5等寬螢幕上html

* 的font-size會變為20px,即 1rem = 100px 1px=0.05rem

* 所以設定元素尺寸的時候,如果測量設計稿 15px 則需設定尺寸為 (0.05*15)rem = 0.75rem

*/// 1rem = 100px 1px = 0.01rem

!(function(doc, win) ;

win.addeventlistener(evt, fn, false);

doc.addeventlistener("domcontentloaded", fn, false);

}(document, window));

前端 移動端適配

參考部落格 移動前端自適應適配布局解決方案 使用flex彈性布局,元素寬度自適應,高度固定為某個px值。這種適配方式是以html的font size值為基礎,所有元素的畫素大小都使用rem表示 除了font size以外 固定視口,縮放值為1.0 計算基礎font size值font size值的計...

移動端前端開發1 0

1.從時間成本來說,移動端的開發最耗時的是尺寸即解析度,為了解決解析度問題,我們要先理清幾個關鍵性概念 window.innerwidth 980 viewport content width device width,initial scale 1,initial scale 1,minimum ...

移動端簡單適配

rem 單位換算 定為 75px 只是方便運算,750px 75px 640 64px 1080px 108px,如此類推 vw fontsize 75 iphone 6尺寸的根元素大小基準值 function rem px 根元素大小使用 vw 單位 vw design 750 html medi...