移動web開發適配方案之Rem

移動端相對pc端來說大部分瀏覽器核心都是基於webkit的，所以大部分都支援css3的最新語法。但是由於手機的螢幕尺寸和解析度都不太一樣（尤其是安卓），所以不得不對不同解析度的手機做適配來達到近似的展示效果。

一般來說，ui只會給我們提供乙份設計圖，目前比較多的是參考手機**的方案給乙份750px寬的設計稿，而我們前端要做的就是在不同解析度的手機上以同樣的效果展示這份設計稿。

1、使用css的@media**查詢設定在不同螢幕尺寸下現實不同的效果，類似於這樣：

@media only screen and (min-width: 375px) 

}@media only screen and (min-width: 360px) 
}@media only screen and (min-width: 320px) 
}

2、使用css的單位rem，類似於這樣：

@media only screen and (min-width: 375px) 

}@media only screen and (min-width: 360px) 
}

let htmlwidth = document.documentelement.clientwidth || document.body.clientwidth;

let htmldom = document.getelementsbytagname('html')[0];
htmldom.style.fontsize = htmlwidth / 7.5 + 'px';
window.addeventlistener('resize', (e) => )

@function px2rem ($px)

/*

當在ip6下時，100vw代表375px,而視覺稿一般是750px,為了方便算，當html上的1rem代表50px時，
視覺稿上的畫素跟rem就存在了100倍的轉化關閉，而此時1vw代表是3.75px，所以html上的font-siez為50/3.75，
約等於13.33333vw,這樣即使不用scss也是比較利於換算的
*/ html

@function px ($px) 

.demo2

最開始想寫這篇文章是因為之前只知道通過js動態調節html的font-size這麼一種適配方案，剛好前段時間接觸到了公司的乙個移動端專案，我只是單獨開發幾個頁面，但我發現是用的vw單位實現的rem方案，剛開始還覺得蠻新奇的，其實後來查資料仔細一想，跟js那種方案本質上並沒有什麼區別，都是以螢幕寬度作為底，動態地調節了html的font-size，也就是1rem的大小。

移動web開發適配方案之Rem

移動端相對pc端來說大部分瀏覽器核心都是基於webkit的，所以大部分都支援css3的最新語法。但是由於手機的螢幕尺寸和解析度都不太一樣 尤其是安卓 所以不得不對不同解析度的手機做適配來達到近似的展示效果。一般來說，ui只會給我們提供乙份設計圖，目前比較多的是參考手機 的方案給乙份750px寬的設計...

rem 適配方案

首先我們要明白，為什麼要用rem單位呢，常用的px不好嗎？原因是如果我們用px作為長度大小單位的話，就無法根據螢幕大小變化實時改變頁面元素的大小，反之，rem就可以做到實時適配。其次，我們也要清楚以rem為單位的元素大小是根據css html根標籤下的文字大小 fontsize 來改變的。在實際開發...

rem適配方案

em大小是基於父元素的字型大小 rem是相對單位，r是root的意思，在html頁面上就是html標籤，所以rem的大小是基於html元素的字型大小 使用flex的伸縮布局 使用百分比的流式布局 使用 查詢的響應式布局，共同點就是元素只能做寬度的適配 除外 rem適配可以實現寬度和高度都能做到適配，...