一招搞定手機端布局 rem

2021-09-24 06:41:41 字數 801 閱讀 4130

px:畫素

em:乙個 m 的寬度(面試:乙個字的寬度)

rem:root em 根元素()的 font-size

vh:view height,視口高度 100vh === 視口高度 vw:view width,視口寬度 100vw === 視口寬度

瀏覽器預設 font-size:16px; chrome瀏覽器預設最小字型大小為12px:font-size:12px; 所以一般情況下,rem 的font-size不要小於12px;

rem 就是元素的 font-size,預設為 16px;(瀏覽器預設font-size)

rem和em 的區別:

百分比整體縮放

百分比布局問題:高度無法確定,寬度與高度沒辦法關聯到一起。

一切單位以螢幕寬度為標準,就能完美還原設計稿。 動態rem思路:動態rem 採用整體縮放的思想,在頁面渲染之前,使用js獲取裝置寬度並設定rem(1rem == html font-size == viewport width),之後的布局單位全部使用rem來實現整體縮放。

使用js動態調整rem(寫在頁面頭部)

"viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">複製**
在使用動態 rem 布局的移動端頁面中,很小的寬度如border-width 依然使用px,因為即使使用rem,當rem小於1px 時,依然會被瀏覽器當做1px 使用。

RecycleView一招搞定

a 新檢視組 b 可為任何基於介面卡的檢視提供相似 的渲染方式 c 作為listview和 gridview的繼承者 d 高度解耦,非常的靈活 e 可以設定不同的layoutmanager itemanimator,itemdecoration 第一步 新增依賴 implementation com...

想要鍵鼠操作手機?一招搞定

有時候忙不過來就希望能在電腦上控制操作我們的手機,或者上班空餘 不引人注目的 用電腦刷刷手機,那麼實現這個想法其實是很容易的,一起看下 首先我們需要把手機投屏到電腦上,我們只需要在電腦上下個total control,用資料線連線電腦和手機,開啟手機相關usb除錯許可權,當然也可以用無線網連線我們的...

一招搞定重定向網頁

3.伺服器端重定向網頁爬取方案 http 302 found 重定向狀態碼表明請求的資源被暫時的移動到了由location 頭部指定的 url 上。瀏覽器會重定向到這個url,但是搜尋引擎不會對該資源的鏈結進行更新,將會再次請求location欄位包含的url,如下圖網頁響應資料 伺服器端重定向在伺...