響應式布局之尺寸單位rem使用

2021-07-06 03:46:38 字數 655 閱讀 5318

web實際開發過程中,特別是移動端的頁面,會遇到元素尺寸及字型在不同解析度裝置上表現差異較大,甚至嚴重影響使用者體驗;

我現在的做法是使用rem作為尺寸單位,來實現頁面內元素尺寸及字型在不同寬度裝置下自由縮放尺寸,從而解決小螢幕上顯示牛大字的尷尬情況;

1. 設定html的字型為100px;

2.頁面內需要用到尺寸的地方都使用rem作為尺寸單位;(這樣在改變html字型大小的時候頁面內的其他元素也都會隨之按比率發生變化;

ps: 如圖上這樣設定尺寸,然後當html的font-size變為50px的時候,那頁面中設定的所有rem單位的尺寸都隨之減少到一半;

3.那麼問題來了,怎麼才能讓html的font-size發生變化呢?

兩個辦法:a. 使用css**查詢,當頁面寬度為某個條件時改變html的font-size;

b. 使用js判斷頁面的寬度,動態調整html的font-size;

這樣就可以實現頁面寬度不同,但是看起來比例、效果還是一樣的。

另外一種簡單粗暴的方法: 

rem響應式布局

監聽瀏覽器,針對不同解析度計算font size function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentlo...

REM響應式布局

因為能相容,手機 平板 pc終端既省錢又省力 有很多 的解決辦法是,為不同的裝置提供不同的mobile版本,或者iphone ipad版本。這樣效果 但是比較麻煩,同時要維護好幾個版本 於是,一次設計,普遍適用 根據螢幕寬度,自動調整布局 layout 第一步 meta vp標籤 meta name...

css中的長度單位rem 響應式

今日閒來,在前端觀察中看到 理解css中的長度單位 覺得不錯,就摘錄下來。css3中也對css中用到的單位進行了改進,單位也就是那幾個,所以我們要搞清楚再用。box line height 1.3em font size 1.3em 元素的行高是當前元素繼承的font size的1.3倍 當前元素的...