<rp id="ez6ub"></rp>

    1. 當前位置:主頁 > 學無止境 > WebApp開發之--"rem"單位

      WebApp開發之--"rem"單位

      時間:1473255549瀏覽:78次 admin

      隨著web app的興起,rem這是個低調的css單位,近一兩年開始嶄露頭角,有許多朋友對于它的評價不一,有的在嘗試使用,有的在使用過程中遇到坑就棄用了。但是我認為rem是用來做web app它絕對是最合適的人選之一。

      一、rem是什么?

      rem(font size of the root element)是指相對于根元素的字體大小的單位。

      簡單的說它就是一個相對單位??吹絩em大家一定會想起em單位,em(font size of the element)是指相對于父元素的字體大小的單位。

      區別:它們之間其實很相似,只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

      二、為什么web app要使用rem?

      這里我特別強調web app,web page就不能使用rem嗎,其實也當然可以,不過出于兼容性的考慮在web app下使用更加能突顯這個單位的價值和能力,接下來我們來看看目前一些企業的web app是怎么做屏幕適配的。

       

      1、實現強大的屏幕適配布局:

      最 近iphone6一下出了兩款尺寸的手機,導致的移動端的屏幕種類更加的混亂,記得一兩年前做web app有一種做法是以320寬度為標準去做適配,超過320的大小還是以320的規格去展示,這種實現方式以淘寶web app為代表作,但是近期手機淘寶首頁進行了改版,采用了rem這個單位,首頁以內依舊是和以前一樣各種混亂,有定死寬度的頁面,也有那種流式布局的頁 面。

      我們現在在切頁面布局的使用常用的單位是px,這是一個絕對單位,web app的屏幕適配有很多中做法,例如:流式布局、限死寬度,還有就是通過響應式來做,但是這些方案都不是最佳的解決方法。

      例如流式布局的解決方案有不少弊端,它雖然可以讓各種屏幕都適配,但是顯示的效果極其的不好,因為只有幾個尺寸的手機能夠完美的顯示出視覺設計師和交互最想要的效果,但是目前行業里用流式布局切web app的公司還是挺多的,看看下面我收集的一些案例:

       

      1.亞馬遜

      亞馬遜手機頁面截圖

       

      2.攜程

       

      攜程手機頁面截圖

      上 面的網站都是采用的流式布局的技術實現的,他們在頁面布局的時候都是通過百分比來定義寬度,但是高度大都是用px來固定住,所以在大屏幕的手機下顯示效果 會變成有些頁面元素寬度被拉的很長,但是高度還是和原來一樣,實際顯示非常的不協調,這就是流式布局的最致命的缺點,往往只有幾個尺寸的手機下看到的效果 是令人滿意的,其實很多視覺設計師應該無法接受這種效果,因為他們的設計圖在大屏幕手機下看到的效果相當于是被橫向拉長來一樣。

      流式布局并不是最理想的實現方式,通過大量的百分比布局,會經常出現許多兼容性的問題,還有就是對設計有很多的限制,因為他們在設計之初就需要考慮流式布局對元素造成的影響,只能設計橫向拉伸的元素布局,設計的時候存在很多局限性。

       

      2、固定寬度做法

      還 有一種是固定頁面寬度的做法,早期有些網站把頁面設置成320的寬度,超出部分留白,這樣做視覺,前端都挺開心,視覺在也不用被流式布局限制自己的設計靈 感了,前端也不用在搞坑爹的流式布局。但是這種解決方案也是存在一些問題,例如在大屏幕手機下兩邊是留白的,還有一個就是大屏幕手機下看起來頁面會特別 小,操作的按鈕也很小,手機淘寶首頁起初是這么做的,但近期改版了,采用了rem。

       

      3、響應式做法

      響 應式這種方式在國內很少有大型企業的復雜性的網站在移動端用這種方法去做,主要原因是工作大,維護性難,所以一般都是中小型的門戶或者博客類站點會采用響 應式的方法從web page到web app直接一步到位,因為這樣反而可以節約成本,不用再專門為自己的網站做一個web app的版本。

       

      4、設置viewport進行縮放

      天 貓的web app的首頁就是采用這種方式去做的,以320寬度為基準,進行縮放,最大縮放為320*1.3 = 416,基本縮放到416都就可以兼容iphone6 plus的屏幕了,這個方法簡單粗暴,又高效。說實話我覺得他和用接下去我們要講的rem都非常高效,不過有部分同學使用過程中反應縮放會導致有些頁面元 素會糊的情況。

      <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

      上面講了一大堆目前大部分公司主流的一些web app的適配解決方案,接下來講下rem是如何工作的。前面我們說過rem是通過根元素進行適配的,網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小。舉個例子:

          html{
              font-size:20px;
          }
          .btn {
              width: 6rem;
              height: 3rem;
              line-height: 3rem;
              font-size: 1.2rem;
              display: inline-block;
              background: #06c;
              color: #fff;
              border-radius: .5rem;
              text-decoration: none;
              text-align: center;
          }

      上面代碼結果按鈕大小如下圖:

      圖1

      我把html設置成10px是為了方便我們計算,為什么6rem等于60px。如果這個時候我們的.btn的樣式不變,我們再改變html的font-size的值,看看按鈕發生上面變化:

       

      html{
          font-size:40px;
      }

      按鈕大小結果如下:

      圖2

      上面的width,height變成了上面結果的兩倍,我們只改變了html的font-size,但.btn樣式的width,height的rem設置的屬性不變的情況下就改變了按鈕在web中的大小。

      其實從上面兩個案例中我們就可以計算出1px多少rem:

      第一個例子:

      120px = 6rem * 20px(根元素設置大值)

      第二個例子:

      240px = 6rem * 40px(根元素設置大值)

      推算出:

      10px  = 1rem 在根元素(font-size = 10px的時候);

      20px  = 1rem 在根元素(font-size = 20px的時候);

      40px  = 1rem 在根元素(font-size = 40px的時候);

      在上面兩個例子中我們發現第一個案例按鈕是等比例放大到第二個按鈕,html font-size的改變就會導致按鈕的大小發生改變,我們并不需要改變先前給按鈕設置的寬度和高度,其實這就是我們最想看到的,為什么這么說?接下來我們再來看一個例子:

      由 上面兩個的demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素,所以大家可以通過chrome瀏覽器的調試工具去 切換第三個的demo在不同設備下的展示效果,或者通過縮放瀏覽器的寬度來查看效果,我們可以看到不管在任何分辨率下,頁面的排版都是按照等比例進行切 換,并且布局沒有亂。我只是通過一段js根據瀏覽器當前的分辨率改變font-size的值,就簡單的實現了上面的效果,頁面的所有元素都不需要進行任何 改變。

       

      到這里肯定有很多人會問我是怎么計算出不同分辨率下font-size的值?

      首先假設我上面的頁面設計稿給我時候是按照640的標準尺寸給我的前提下,(當然這個尺寸肯定不一定是640,可以是320,或者480,又或是375)來看一組表格。

      rem字體轉化圖

      上 面的表格藍色一列是上面案列中頁面的尺寸,頁面是以640的寬度去切的,怎么計算不同寬度下font-site的值,大家看表格上面的數值變化應該能明 白。舉個例子:384/640 = 0.6,384是640的0.6倍,所以384頁面寬度下的font-size也等于它的0.6倍,這時384的font-size就等于12px。在不 同設備的寬度計算方式以此類推。

      上面的案列中 我是通過JS去動態計算根元素的font-size,這樣的好處是所有設備分辨率都能兼容適配,淘寶首頁目前就是用的JS計算。但其實不用JS我們也可以 做適配,一般我們在做web app都會先統計自己網站有哪些主流的屏幕設備,然后去針對那些設備去做media query設置也可以實現適配,例如下面這樣:

          html {
              font-size : 20px;
          }
          @media only screen and (min-width: 401px){
              html {
                  font-size: 25px !important;
              }
          }
          @media only screen and (min-width: 428px){
              html {
                  font-size: 26.75px !important;
              }
          }
          @media only screen and (min-width: 481px){
              html {
                  font-size: 30px !important; 
              }
          }
          @media only screen and (min-width: 569px){
              html {
                  font-size: 35px !important; 
              }
          }
          @media only screen and (min-width: 641px){
              html {
                  font-size: 40px !important; 
              }
          }

      上面的做的設置當然是不能所有設備全適配,但是用JS是可以實現全適配。具體用哪個就要根據自己的實際工作場景去定了。目前國內使用了rem技術的網站,有手機淘寶,淘寶native app的首頁是內嵌的web app首頁。

      JS適配代碼:

          <script>        
              (function (doc, win) {    
                  var docEl = doc.documentElement,    
                  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    
                  recalc = function () {    
                  var clientWidth = docEl.clientWidth;    
                  if (!clientWidth) return;    
                  docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';    
              };    
              if (!doc.addEventListener) return;    
              win.addEventListener(resizeEvt, recalc, false);    
              doc.addEventListener('DOMContentLoaded', recalc, false);    
              })(document, window);    
          </script>

      總結:這 篇文章從開始講訴了什么是rem?以及rem這個單位的優勢,為什么要在web app上去使用“rem”這個單位。雖然我接觸移動端的開發也差不多三個月時間了,在互聯網上也找了很多資料,發現這篇文章,真的講的很詳細,很適合新手 小白們的入門。在研究web app開發的時候,自己也寫一篇,喜歡的朋友,可以看看。雖然寫的不是很好,勿噴哈!嘿嘿...本文轉自---騰訊ISUX

      關于博主

      博主

      博主:江洪宇

      職業:SEO優化、個人站長

      簡介:個人草根站長

      aⅴ在线东京热男人的天堂