可爱的rem
前端開發中，移動端的開發可以說是舉足輕重了，可是又面臨著不同設備尺寸和分辨率的尷尬點。今天[2018-09-16]臺風山竹登陸廣東，來勢洶洶，外出是不可能的了，那就宅著寫寫這篇小文章吧...原文請戳這里-談談rem單位
超長的前奏
說到移動端的響應布局，你也許會想到：
1. 使用CSS3媒體查詢的方法
body {background: yellow; } @media screen and (max-width: 400px) {body {background: red;} } 復制代碼嗯，這種的樣式的工作量超級大，因為要對圖片和文字等資源針對不同的尺寸進行設置。一種涼涼的感覺從心底飄過～～～
2. 直接使用百分比
這種方法比較適合移動端上，頁面圖片鋪滿寬度屏幕的運營推廣活動的情況。因為在設計的時候會有一個750px的寬等等設計規范，能夠很好的適配到不同手機啦。然后工作就是切圖了...
#percent{width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center; } #percent .item{flex: 1; } #percent .item img{display: block;width: 100%;height: auto; } 復制代碼這種切圖比較費力，如果認真看上面的gif圖的話會發現是三張同等寬高的圖片，在chrome上的調試器上看是有白條的，不過不影響。因為在真機上是不存在的。如果不是切圖寬度等分的情況下，那就不建議這種百分比的適配方法了。
3. 固定寬度
這種方法比較適合PC端開發，在移動端是必須不能才去的。因為移動端的寬度足夠，能夠帶來足夠好的體驗，并且最重要的一點是其像素比是1啊。在縮放的時候不會帶來內容變形的體驗。如果到移動端上面，那就呵呵了～
#container{width: 680px;background: yellow;margin: 0 auto; } h1{text-align: center; } 復制代碼4. 使用viewport
移動設備上的viewport是設備屏幕上用來顯示網頁的那部分區域，再具體一點就是瀏覽器上用來顯示網頁的那部分區域，但viewport又不局限于瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。
這得要在網頁的head標簽上面設置meta，比如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 復制代碼嗯，這個知識點還是一丟丟的，詳細的內容參考菜鳥教程：響應式 Web 設計 - Viewport。 本博文的重點不是這個～
是的，我們可以使用REM來進行適配啊：可以說是目前最強的移動端適配方案...
rem是什么
rem和em單位一樣，都是一個相對單位，不同的是em是相對于父元素的font-size進行計算，rem是相對于根元素html的font-size進行計算的，這樣一來rem就完美的繞開了復雜的層級關系，實現了類似em單位的功能。默認情況下，瀏覽器給的字體大小是16px，按照轉化關系16px = 1rem。
咦，都是固定了根元素是默認16px了，如何設備不同的移動設備呢？
問題提出也是答案所在，我們動態改變根元素html的字體默認大小不就行了嘛！見下：
rem自適應處理方案
使用rem布局的時候，為了兼容不同的分辨率，我們應該要動態的修正根字體的大小，讓所有的用rem單位的子元素跟著一起縮放，從而達到自適應的效果。
嗯，下面就是動態改變根字體的大小了，采取的當然是javascript來進行控制啦，不然怎么知道像素比哦。
一種是獲取像素比【像素比=物理像素/邏輯像素】通過devicePixelRatio，其兼容性在ie上要在11及11+，兼容性良好。罷了，不討論IE瀏覽器了，看者慎用IE...
(function(){var devicePixelRatio = window.devicePixelRatio || 1; })(); 復制代碼嗯，在移動端上面適配，rem和viewport搭配效果更佳哦！完整代碼片段如下：
<head><meta name="viewport" /> </head> 復制代碼(function(){var fontSizeMatchDeviceWidth = function(){var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320,devicePixelRatio = window.devicePixelRatio || 1,fontSize = (Math.ceil(deviceWidth * 16 / 320)),scale = 1 / devicePixelRatio; // 默認的縮放document.documentElement.style.fontSize = fontSize + 'px';document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='+'scale'+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no,viewport-fit=cover'); // 增加viewport-fit=cover適配iphone x};(function(){var ua = navigator.userAgent;if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){fontSizeMatchDeviceWidth();} else { // pc端優雅降級document.documentElement.style.fontSize = '24px';}})(); })(); 復制代碼在上面的基礎上，添加點點樣式，完整的一個demo走一下：
#container{background: yellow;margin: 0 auto; } h1{text-align: center; } 復制代碼如有紕漏，歡迎看到的各位小哥哥小姐姐指正 @～@！ 更多內容請前往我的github
總結
- 上一篇： python训练手势分类器_使用Pyto
- 下一篇： 返回值被忽略_《Jenkins Tips