移動端簡單適配

2021-10-03 18:24:25 字數 689 閱讀 3675

// rem 單位換算:定為 75px 只是方便運算,750px-75px、640-64px、1080px-108px,如此類推

$vw_fontsize

: 75; // iphone 6尺寸的根元素大小基準值

@function

rem($px)

// 根元素大小使用 vw 單位

$vw_design

: 750;

html

@media screen and (

min-width

: 540px) }

html,body

// body 也增加最大最小寬度限制,避免預設100%寬度的 block 元素跟隨 body 而過大過小

body

div,

p,ul,

li,h4,

h5,h6,

input

input:focus,

select:focus,

button:focus

body

li

/*使用*/

@import

'***.scss'

; /*上面的檔案*/

font-size

:rem

('測量的數字'

)

移動端適配

js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...

移動端適配

不論裝置寬度是多少,統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大,都看作375px。width只能改變布局視口,不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...

移動端適配

無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...