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