移動端網頁開發在網上可以找到很多種開發方案，本篇博文記錄的是採用rem來開發移動端網頁的一些過程。
首先，在css當中的單位分為兩大種，一種是絕對單位，一種是相對單位。例如常用的px就是絕對單位，而本篇文章所用的rem則為相對單位。
下面列出了一些常見的絕對單位和相對單位。
絕對單位：
相對單位：
絕對單位一般來說是乙個固定的值，該多少就是多少。就好比生活種小明有1000塊，那麼這1000塊是實打實的1000塊。而相對單位則需要參考，例如小紅的錢為小明錢的50%，此時對於小紅來說，她具體有多少錢呢，想要知道就需要先弄清楚小明到底有多少錢。
rem就是乙個相對單位，它需要以根元素html的字型大小作為參考。
例如，html的font-size值為10px，那麼1rem就等於10px。
html
div
rem來開發網頁，將css當中使用的單位設定為rem，那麼只要根元素html的字型大小發生變化，那麼網頁裡面的元素會因為使用了rem作為單位也會跟著發生變化。
例如螢幕的寬度變大，就可以將根元素html的font-size相應的變大，那麼網頁裡面的元素自然而然的就會變得更大一些，從而適合於更大的螢幕。
所以在弄懂了rem之後，下面就要來說說如何動態的設定網頁根元素html的font-size值。
想要讓字型大小能夠根據螢幕寬度的變化而動態的變化，需要知道兩個值，乙個是使用者的螢幕寬度，第二個是在開發移動端網頁時的參照螢幕。
獲取使用者的螢幕寬度，可以通過下面的js**來實現：
document.documentelement.clientwidth而在本篇文章當中，採用的螢幕寬度為375，也就是iphone 6、7、8為參照裝置。
在知道了使用者螢幕寬度和專案的參照螢幕寬度之後，就可以計算出兩個螢幕寬度的比例。
document.documentelement.clientwidth /
375
html的font-size值。
例如，在開發中，螢幕寬度為375時的根元素html的字型大小為20px，那麼在使用者螢幕下的根元素字型大小就為：
20
*(document.documentelement.clientwidth /
375)
html的font-size值。
**如下：
(
function
(global)
else
}remchange()
; global.
addeventlistener
('resize'
,remchange,
false);
global.
addeventlistener
('pageshow'
,function
(e)})}
)(window)
;
html的font-size值，但是如果你想要更加快速的開發移動端網頁，那麼就仍然需要閱讀下面的內容。
在開發移動端網頁的時候，需要知道的乙個值是裝置的dpr。dpr表示的是裝置畫素和邏輯畫素的比值，例如iphone6 的邏輯畫素寬度為375,而裝置畫素寬度為750，而iphone6的dpr就等於750(裝置畫素) / 375(邏輯畫素) = 2。
在這裡不去對相應的螢幕概念進行闡述，本篇文章主要講解的還是如何更快更好的開發移動端的網頁。一般來說，移動端網頁的設計稿的寬度都是等於參照裝置的裝置畫素,也就是裝置的物理畫素，而在開發網頁的時候則需要遵照邏輯畫素，這個時候就出現了乙個問題，以參照機型為iphone6為例，設計稿的寬度為750px, 而實際開發的時候裝置的寬度為375px，此時，如果想要將設計稿中的內容準確的顯示在移動端網頁當中，就需要將測量到的元素的尺寸除以2(dpr)，才可以得到元素的邏輯畫素值。
而如果想要使用rem為單位，讓移動端網頁元素能夠根據螢幕寬度的變化而變化，那麼在每乙個元素設計值的時候就需要進行兩個步驟的運算，先將測量到的值除以dpr，然後再來將得到的元素邏輯畫素值(單位為px)轉換到rem。這樣在開發網頁的時候會變得異常繁瑣。
為了減少在開發移動端網頁時的繁瑣計算，在本篇博文中將通過gulp當中的外掛程式px3rem來解決這個問題。
在這裡省略了gulp的安裝和其他配置，僅僅說明如何通過gulp外掛程式px3rem來將px轉換為rem。
在gulpfile.js當中，可以通過下面的**來進行設定：
const px2rem =
require
('gulp-px3rem');
// 引入相應的外掛程式
...gulp.
task
('less'
,function()
))...});
...
px3rem這個外掛程式設定了兩個引數，remunit表示rem參考的字型大小，正常情況下設定的值應和根元素的字型大小相同，例如上面說到的20px,但是為了抹平dpr導致的2倍關係，所以在這裡直接設定成了40。
這樣做的好處是可以直接將設計稿中測量出的值寫到**裡，例如設計稿中量出的寬度為100px，那麼**中寫的值就是100px，這樣就省去了繁瑣的計算問題。
首先可以將上面說到的動態更改根元素html的font-size的js**儲存到乙個叫rem.js的檔案中，在後續的每次移動端網頁開發中都引入進來，這樣就不再需要每次都手動設定html的font-size值了。
然後在gulp的配置檔案中設定好上乙個小節提到的外掛程式px3rem的相應引數，然後監聽less即可。 這樣一系列的設定下來，就可以在開發的時候，將測量出來的尺寸直接寫在**中，不需要開發者進行任何的計算。
當然，別忘了設定在本篇文章中，講解了通過rem開發移動端網頁的一些事，部分內容適當的進行了省略，也有些內容或許不太嚴謹，但是還是希望本篇文章對你有所幫助和啟發。viewport。。
rem布局實現pc端網頁自適應
首先，將html的font size設定為100px,方便計算然後將body的font size設定為正常值，例如 12px,不然其他的dom都會繼承html的font size，導致效果差距巨大，再在index.html頁面中寫動態設定font size字型大小的js 當瀏覽器發生變化的時候，內容...
移動端布局2 vw結合rem實現移動端布局
media all and max width 320px media all and min width 321px and max width 375px media all and min width 376px 1 例如設計圖為750px 設計圖量出height為88px 2 考慮dpr為2...
rem在移動端的應用
1rem為頁面根目錄的字型大小。若 html 則1rem 20px 在移動頁面的具體應用。移動端的設計稿一般都是iphone6為基礎設計的，設計稿的寬為750px 手機的物理尺寸是375px 所以在用css的時候，設計尺寸需要初以2 要用rem完成移動端的適配，需要固定瀏覽器的顯示寬度不變。第一 設...