移動端頁面的適配

2021-08-31 21:13:27 字數 594 閱讀 9039

一、關於viewport設定

二、關於不同裝置rem大小的計算，以及動態設定畫素縮放比

function setsize()
三、koala將less轉義為css的運用

設計稿寬度為：750px,與iphone6為整倍數關係，故選iphone6為除錯裝置。(選擇除錯裝置時，最好選擇與設計稿寬度成整倍數的裝置）

setsize（）中，html.style.fontsize=pagewidth/10+」px」,故設定less檔案=》 @rem:設計稿寬度/10 rem=>@rem:75rem

@rem: 75rem; //公共樣式
.header 


.logo 


.tel 


}
附上經過koala轉義過來的css對應**

.header 


.header .house 


.header .logo 


.header .tel
至於其他裝置的適配問題，rem早已解決啦。

pc端頁面的適配

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

移動端頁面尺寸適配

以iphone6設計圖為基準 做法一 html head title title meta charset utf 8 meta name viewport content width device width,initial scale 1,maximum scale 1,user scalabl...

移動端 Web頁面適配

由於手機機型較多，各個手機的螢幕尺寸不一樣，所以做移動端頁面，需要考慮在安卓和ios的各種尺寸裝置的相容問題，我們要做的 web 頁面適配，就是為了在不同裝置上，頁面能夠保持統一展示效果，或等比縮放。常見的移動適配方案有以下幾種 2.1 viewport 可視區 最初手機端需要照顧 pc 端，如果不...