所以如果把頁面分成15份的話就是1此代碼寫在html頁面中l(wèi)tscript設(shè)置html的字體大小，將頁面分成15份，即75015=50var oHtml=documentgetElementsByTagName#39html#390=+#39px#39ltscript2 在less頁面聲明使用remr50rem；可以運用媒體查詢依據(jù)用戶的偏好動態(tài)調(diào)整字體大小例如，針對在小屏幕設(shè)備上查看內(nèi)容的用戶，可以減小字體大小@media maxwidth 600px p fontsize 16px 使用em和rem單位設(shè)置相對大小em單位能讓您依據(jù)元素的父元素設(shè)置相對大小rem單位則是依據(jù)根元素html元素設(shè)置相對大小；默認(rèn)瀏覽器字體是16px 也就是1rem=16px 如果你設(shè)置html為10px ， 那意思就是讓1rem=10px了，但是谷歌瀏覽器字體最小是12px，所以在谷歌瀏覽器上1rem=12px，如果你設(shè)置寬度為20px，那就是2rem非谷歌瀏覽器；本文介紹如何在手機端適配所有屏幕大小的設(shè)備，并詳細(xì)解釋了rem單位的使用方法rem是一個相對長度單位，它基于根元素html的字體大小，使得在不同屏幕尺寸的設(shè)備上都能保持頁面的適配使用rem單位時，需要將html元素的字體大小設(shè)置為一個基礎(chǔ)值，例如40px這樣，當(dāng)設(shè)置一個元素的字體大小為1rem時，其實際；在CSS大小單位的選擇上，不同單位各有特點與適用場景rem單位基于根元素html的字體大小，這使得在根元素設(shè)置統(tǒng)一字體大小后，計算元素的寬高變得簡單直觀然而，由于依賴于根元素的大小，頁面的響應(yīng)式布局可能需要額外的處理px單位是像素，是設(shè)備或圖片的最小單位它常用于設(shè)置固定的布局或元素大小。

體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸它會繼承父級元素的字體大小，因 此并不是一個固定的值3rem 是 CSS3 新增的一個相對單位root em，根 em，使用 rem 為元素設(shè)定字 體大小時，仍然是相對大小，但相對的只是 HTML 根元素4區(qū)別IE 無法調(diào)整那些使用 px 作為單位的；在移動端頁面設(shè)計中，px和rem的轉(zhuǎn)換與應(yīng)用是不可或缺的本文重點介紹了rem單位的使用，它基于根元素的fontsize進行計算，與em類似但依賴于html元素的初始設(shè)置以下是對rem布局的理解和實踐首先，初始化根元素的fontsize非常重要，通常設(shè)置為625%，使得1rem等于10px，避免了小數(shù)計算的麻煩在處理；使用rem進行移動端適配，其實與所使用的UI庫無關(guān)要實現(xiàn)rem適配，首先需要在HTML標(biāo)簽中定義一個基值例如html fontsize 50px 這樣設(shè)置后，1rem就代表50px在使用rem時，只需直接寫width 1rem，它就代表寬度為50px如果使用SassLess等CSS預(yù)編譯語言，可以通過定義函數(shù)來簡化轉(zhuǎn)換；rem相對單位，可理解為”root em”， 相對根節(jié)點html的字體大小來計算，CSS3新加屬性，chromefirefoxIE9+支持2特點 PX特點1 IE無法調(diào)整那些使用px作為單位的字體大小2 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位3 Firefox能夠調(diào)整px和em，rem，但是96%以上的；1 PX與REM的關(guān)系基于基準(zhǔn)字體大小2 通常，HTML根元素的字體大小設(shè)為基準(zhǔn)值，例如16px3 1rem等于基準(zhǔn)值的大小，即16px4 REM單位是相對單位，基于根元素字體大小5 PX轉(zhuǎn)換為REM時，目標(biāo)像素值除以基準(zhǔn)字體大小得到REM值6 REM轉(zhuǎn)換為PX時，REM值乘以基準(zhǔn)字體大小得到對應(yīng)像素值7；px與rem之間的轉(zhuǎn)換關(guān)系主要依賴于基準(zhǔn)字體大小通常，在響應(yīng)式設(shè)計中，設(shè)計師會將HTML根元素的字體大小設(shè)為基準(zhǔn)值，例如假設(shè)為16px此時，1rem就等于這個基準(zhǔn)值的大小，也就是這里的例子中的16px也就是說，rem單位是基于根元素字體大小的相對單位因此，當(dāng)需要轉(zhuǎn)換px到rem時，只需將目標(biāo)像素值除以。

rem是指根元素root element html 的字體大小 ，根元素默認(rèn)的字體大小為16pxrem是通過根元素進行適配的，網(wǎng)頁中的根元素是html我們通過設(shè)置html的字體大小就可以控制rem的大小所以默認(rèn)我們認(rèn)為1rem=16px 2rem=32px如果為了方便計算我們一般設(shè)置1rem=100px ，我們需要設(shè)置字體大小為100px 所。

responsive font lastmodify zhancheng 由于UE目前都按375為12比例計算，所以默認(rèn)370px為fontsize100px！important注釋掉的地方是官方responsive默認(rèn)以iphone45的標(biāo)準(zhǔn)為基準(zhǔn)定義的 media screen and minwidth 320px html *fontsize 100px！important* fontsize 84375px；1 設(shè)計稿寬度為750px時，頁面的HTML字體大小應(yīng)設(shè)置為100px，即1rem等于100px2 如果頁面寬度為750px，并且HTML字體大小設(shè)置為100px，那么1rem等于100px3 在設(shè)計稿中，一個按鈕的尺寸為200px乘以90px4 將設(shè)計稿中的按鈕尺寸轉(zhuǎn)換為rem單位，即200px100px = 2rem，90px100px = 09rem5 因此，轉(zhuǎn)換后的按鈕尺寸為2rem乘以09rem6 換算公式是rem；以1rem等于100px為例，頁面大小變化時，可通過調(diào)整html字體大小來更新rem單位現(xiàn)今，手動計算rem單位已較少采用使用npm庫如postcsspxtorem能自動將px轉(zhuǎn)換為rem，簡化代碼編寫在Vue項目中，通過在或中配置postcss即可實現(xiàn)自動轉(zhuǎn)換，僅需按照px編寫代碼，由庫自動處理轉(zhuǎn)換；remroot em是CSS3新增的相對單位，相對于根元素，即html元素通過在html中設(shè)定一個參考值，其他子元素的值可根據(jù)此參考值轉(zhuǎn)換rem單位完全取決于開發(fā)者的需求和選擇瀏覽器默認(rèn)字號為16px，px與rem之間的轉(zhuǎn)換關(guān)系如下若在css中未設(shè)定html的fontsize，則默認(rèn)1rem等于16pxrem的優(yōu)勢在于其相對；1rem 等于 html 根元素設(shè)定的 fontsize 的px值，假如我們在css里面設(shè)定下面的css那么后面的CSS里面的 rem 值則是以這個14來換算，例如設(shè)定一個 div 寬度為 3rem ，高度為 25rem 則它換算成px為 width42px height35px ，同理，假如一個設(shè)計稿為寬度 42px ，高度為 35px ，則換成；使用JavaScript或CSS查詢獲取瀏覽器頁面的實際寬度和高度計算頁面比例，并與常見的屏幕比例進行比較，以確定頁面的有效寬度和高度計算1rem的值根據(jù)頁面有效寬度，設(shè)定1rem等于頁面寬度的某個百分比，通?？梢栽O(shè)為Wp100，以便后續(xù)計算使用rem和px函數(shù)進行布局在設(shè)計稿中確定各元素的尺寸，并根據(jù)設(shè)計。