如何進行PC端多屏適配

2021-10-06 16:15:41 字數 677 閱讀 5304

這裡介紹一下 rem 適配方案:

能夠流暢的適配不同解析度的螢幕,並且開發效率跟使用px開發沒什麼區別,只是多了將px轉化成rem的css函式

效果圖如下(可以看到在不同的解析度下,依然可以保持較好的布局):

根據設計稿算出 px轉化成rem 的縮放比(這裡我的設計稿是 1920px,然後上面導航欄的字型大小為34px,所以都以這個為基準,算出縮放比為 56.47,然後反過來除就等於導航欄字型大小,其他的、文字、div都按照這個去算,不懂得自己動手敲一遍,然後使用px的地方用這個函式代替就好了,這裡使用的是 scss)

$ratio: 1920 / 56.47; // 縮放比   34

// 返回對應螢幕下的rem值

@function px2rem($px)

樣式書寫如下( px2rem(70) 等於 1920px螢幕下的70px):
.title
再在html頁面加上如下js**,監聽resize事件,動態設定 rem 中 根字型的大小,那麼使用rem的元素會根據 根字型 的大小變化而變化。

釘釘如何進行PC端開發

前段時間,用釘釘進行了伺服器端的開發,對照著官方文件,感覺還是比較順利的。後續想有時間研究一下pc端客戶端的開發,看著官方文件,說的確實是比較簡練,但也確實沒看太明白,廢了半天勁也沒成功。後來經過無數次嘗試,發現期待的彈窗竟然出現了,為了讓其他人少走彎路,下面將自己的心得記錄如下 釘釘pc客戶端開發...

PC端的測試應該如何進行?

這裡就想稍微整理一下從網上各位大神那裡找來的資料。1 介面ui檢查 from 爬蟲師 l 完整性 1顯示時應考慮資料顯示寬度的自適應或自動換行 資料長度較長 2所資料展現的介面 如查詢等 必須使測試資料的記錄數超過一頁,以驗證滿頁時其窗體是否有橫向 縱向滾動條,介面顯示是否正常。l 一致性 如多個系...

移動端如何進行rem的適配

網上很多都說會pc網頁開發,也就會了mobile網頁開發。那麼實際呢也是如此,但是對於新手來說卻摸不著頭腦無從下手,一直糾結於適配的問題,那麼這裡就來展示下rem適配。展示rem適配 rem適配 function 如果設計師給的圖是750px 那麼1rem就是750 16 46.875px 也就是1...