移動端適配以及百分比佈局與rem比較

前言

對於熟悉pc端的小夥伴來說,對於靜態頁面的佈局,一般都是沒有什麼問題的,為了保持各瀏覽器顯示的一致性,無論是選擇優雅降級還是漸進增強,我們有時不得不做相容性處理,比如css中的hack技術,css3中新增屬性新增一些瀏覽器字首等,但在移動端對h5新增的屬性都比較友好,無需考慮pc端諸多繁瑣的相容性問題,但這並不意味不存在相容性問題,因為移動裝置很多(ios,android等),各裝置解析度不一致,那麼同樣為保持在各個裝置上顯示一致性,我們必須得進行適配處理,對於接觸得少移動端的童鞋來說,往往從設計師那拿到psd文件,如果依然按照pc端的處理方式,絕對是走不通的,有時卻不知如何下手,往往處理得不是很好,一聽到什麼rem適配,100%佈局,對於熟悉使用固定畫素值的方式的童鞋來說,剛開始內心是焦慮的,對於如何選擇什麼樣的方式很好的進行頁面佈局實現內容結構良好的的展現,非常苦惱,而在頁面互動上,元素觸發事件等與pc端也有很大的不同,對於移動端的學習,我也一直在學習當中,今天給大家分享一下自己的學習心得,把自己曾學過的東西進行總結梳理了一下,本篇並不涉及到什麼高大上的內容,初學者筆記學習心得,如果您是老司機,可以選擇上車也可以下車,歡迎路過的老師多提意見和指正.

pc端網站與移動端(手機)網站區別

jd.gif

PC端:螢幕尺寸大,顯示內容多,結構複雜,縮小瀏覽器視窗,頁面內容結構並不會發生改變,也並不是響應式
移動端(手機網站):螢幕尺寸小,顯示的內容有限,結構清晰,簡潔,裝置型別(ipad,iphone5,6,安卓等)繁多,頁面內容結構自適應變化,隨著瀏覽器視窗縮小而縮小,放大而放大,等比例縮放
相同點:利用html+css(包括css3)+javascript,pc端效能優化同樣適用於移動端策略
不同點:

移動端的網路速度手機使用者大多是通過2G,3G,4G網路來上網,網路速度遠低於大部分PC常用的有線網路的,所以移動端網頁如果過大,載入時間就會越長,會增加網頁訪問的跳出率,對於移動端來說,所有的載入速度必須在1秒之內,所以移動端的效能優化必須要考慮的問題,包括圖片載入,檔案大小等,具體效能優化,可參考往期,不可不知的前端效能優化

文章
PC端上,頁面的互動都是滑鼠點選,滾輪等操作,而在手機上,都是手指觸屏,滑屏操作,頁面元素上的按鈕,連結等也要大小適中,適合手指點選,在事件處理上也有很大的區別
PC端相容性繁多(三個祖中ie678得供著),而移動端無需考慮,更新快,對h5新增的屬性,相容性都很好,頂多加上webkit核心字首,但是這並不意味著在各個手機瀏覽器顯示相同,什麼UC,QQ瀏覽器仍然是需要特殊相容性處理的
pc端,頁面佈局,設計稿多大,基本上按照psd文件,按照1:1切圖,固定寬度,高度,圖片已切出來的實際尺寸大小進行填充即可,但是在移動端上,則不行,手機端的解析度比較高,至於這個解析度(它指的是顯示屏橫縱能夠容納的畫素點,比如1366x768)表示的是橫向能容納1366個畫素點,而縱向能容納768個畫素點,解析度越高,畫素點越多,圖片就越清晰

在pc端,1px畫素和瀏覽器端的畫素可以一一對應,按照設計師給出的psd文件按照1:1的方式來做就行了,ps軟體中,量出多大的尺寸,對應的css裡面就設定多少畫素,而在移動端,裝置螢幕尺寸比較小,解析度比較大,比如提高解析度原先320到640的或者750,960的，提高到兩倍，三倍，但是提高之後,css的畫素還是依然沒有改變,在pc端是一個畫素,而到移動端,可能就是兩畫素,三畫素,所以一般針對移動端的設計稿,常見的做法事,從設計稿量中量出來的尺寸,切出來圖,在實際給元素設定尺寸時,都應對應的減半(2:1,或者3:1)的方式進行設定尺寸(比如設計稿是960,750,640的的圖,那麼減半就是320,375,320的),頁面中字型,圖片對應減半設定即可
新的API,獲取元素的方法,比如document.querySelector(),document.querySelectorAll(),雖然在效能上不如舊的選擇器,但是用著方便,一些移動端框架用該選擇器比較多,比如jQuery Mobile，sui Mobile,mui等
pc端的事件不適合在移動端用,比如click(會有300毫秒延遲),移動端上用ontouchstart(手指按下),ontouchmove(手指移動),ontouchend,但是注意的是在Google模擬器下使用on的方式新增touch事件會無效,具體怎麼解決這種問題,可以通過addEventListener()的繫結方式,注意用此方法監聽事件時,就不要帶on,具體見下程式碼所示
針對移動端一畫素偏差問題,與畫素比有關係,也就是所謂的物理畫素(解析度)與獨立畫素(螢幕的寬度),pc端一畫素就是一畫素,但是在移動端1畫素,有時就不是一畫素,也許是兩畫素,三畫素的
- 通過新增偽類的方式,同時改變transform:scale(0.5),縮小為一半
- 設定div寬度為1畫素,同時設定IE怪異盒模型,box-sizing:border-box
- 一畫素的背景圖片替代
手機網站不適合用作響應式,比如:bootstrap等,因為它很重,不輕量,在pc端網路頻寬下載入還是可以的,但是在移動端,就很耗效能來,耗流量,耗電..太過於臃腫,而影響網頁的載入
佈局方面,移動端,少用浮動,會破壞文件流,不易拓展,多用Flex佈局,移動端上Ie怪異盒模型也是很常用,對於改變元素位置,通常用translate,而不用定位,改變left,top值
PC端上,用固定畫素值px作為元素設定尺寸單位,而在移動端,通常用rem(root 根節點根據html的字型大小計算其他元素尺寸),或者100%,
...

為什麼要做適配

為了適應各個移動終端裝置螢幕尺寸,完美的呈現應有的佈局效果
手機端上的響應式不能用在手機app上,非常耗效能,耗流量,耗電
各個移動端裝置,解析度大小不一致,網頁鋪滿整個螢幕,並在各種分辨下等比例縮放,不失真
h5頁面直接可以在安卓,ios上引用(也就是所謂的混合hybrid App,指的是開發一個App一部分功能用native構建,一部分功能用html5構建,套殼,比如:phoneGap(Cordova))

怎麼做適配,有哪些適配方案

流式佈局,視口(viewport)寬度與裝置等寬,做自適應,100%或者具體畫素值
固定高度,寬度百分比適配,flex佈局,這種方式比較適合佈局均勻,適合100%佈局,內容結構不復雜
固定寬度,設定一個標準值(比如以640為準),改變縮放比例(動態的建立meta標籤,改變縮放比例)
rem做適配,在不同的裝置上顯示不同的效果
畫素比適配:畫素比 = 物理畫素/獨立畫素(這種比較繁瑣,難以理解,以後再詳談)

用100%佈局適配

適合頁面內容結構均勻分配,固定高度,結構不是很複雜,注意要設定viewport視口內容寬度等於裝置的寬度
如下示例程式碼如下
html內容結構樣式程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <title>固定高度,寬度自適應,100%比做適配</title>
  <style type="text/css">
           *{
              padding:0;
              margin:0;
          }
          body{
              font-size:16px;
              overflow:hidden;
              -webkit-box-sizing:border-box;
              box-sizing:border-box; 
          }
          /*left start*/
          .left{
               width:40px;        /*兩邊固定寬度,中間自適應*/
               height:40px;       /*高度可以不加,由內容填充*/
               position:absolute;
               left:0;
               top:0;
               background:red;
               text-align:center;
               line-height:40px;
           }
           /*left end*/
           /*center start*/
           .center{
               width:100%;        /*寬度不固定*/
               background:orange;
               height:40px; 
               margin-left:40px;
           }
           .center input{
               width:100%;
               height:40px;
               outline:none;
           }
           /*center end*/
           /*right start*/
           .right{
               width:40px;       /*兩邊固定寬度,中間自適應*/
               height:40px;      /*高度可以不可,由內容填充*/
               text-align:center;
               line-height:40px;
               position:absolute;
               right:0;
               top:0;
               background:green;
           }
             /*right end*/
             /*banner adv start*/
           .banner{
               width:100%;
               height:200px;
               background:pink;
               text-align:center;
               line-height:200px;
           }
           /*banner adv end*/
           /*list start*/
           .list{
               overflow:hidden;
           }   
           .list div{
                width:20%;
                height:90px;
                float:left;
                text-align:center;
                line-height:90px;
           }
           .list div:nth-of-type(1){
               background:orange;
           }
           .list div:nth-of-type(2){
               background:#80B3FF;
           }
           .list div:nth-of-type(3){
               background:#1BA260;
           }
           .list div:nth-of-type(4){
               background:#F2A196;
           }
           .list div:nth-of-type(5){
               background:#FFCE42;
           }
           .listTwo{
               margin:15px 0 0 0;
           }
             /*list end*/
             /*con start*/
           .con{
               width:100%;
               height:200px;
               overflow:hidden;     /*子元素使用來浮動,父元素記得清除浮動*/
               text-align:center;
               line-height:200px;
           }
           .left-80{
               width:80%;
               height:100%;  /*想要一個元素在頁面中顯示必須得給元素高度,繼承父元素*/
               float:left;
               background:#B0E24A;
           }
           .right-20{
               width:20%;
               height:100%; /*高度100%,繼承父元素的高度*/
               float:right;
               background:#6C6863;
           }
           /*con end*/

  </style>
</head>
<body>
    <!-- header start -->
    <header>
            <div class="left">左邊</div>
            <div class="center">
                <form>
                     <input type="search" name="">
                </form>
            </div>
            <div class="right">右邊</div>
    </header>
    <!-- header end -->
    <!-- banner adv start -->
    <div class="banner">adv</div>
    <!-- banner adv end -->
    <!-- 列表list start -->
    <div class="list">
            <div>1</div> 
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>  
    </div>
    <div class="list listTwo">
            <div>6</div> 
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>  
    </div>
     <!-- 列表list end -->
    <!-- con內容開始-->
    <div class="con">
            <div class="left-80">左邊80%</div>
            <div class="right-20">右邊20%</div>
    </div>
    <!-- con內容結束-->
</body>
</html>

如下gif圖所示

100%佈局.gif

Flex佈局適配,最為強大

同樣是適合頁面內容結構均勻分配,固定高度,注意要設定viewport視口內容寬度等於裝置的寬度

老版本的display:box與新版本的display:flex都可以實現頁面的自適應
示例程式碼如下所示
用老版本display:box彈性盒子佈局示例程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
 <title>display:box實現頁面的自適應</title>
 <style type="text/css">
         *{
             padding:0;
             margin:0;
          }
          body{
              font-family:"微軟雅黑";
              font-size:16px;
          }
          .parent{
              display:-webkit-box;     /*宣告彈性盒模型*/
              box-orient:horizontal;
              display:box; 
          }
          .left,.right{
              width:40px;
              height:40px;
              text-align:center;
              line-height:40px;
          }
          .left{
              background:#abcdef;
          }
          .right{
              background:#DD4F43;
          }
          .center{
              -webkit-box-flex:1; /*一定要注意加上瀏覽器字首,否則就會失效*/
              box-flex:1;
          }
          .center input{
              width:100%;
              height:40px;
              outline:none;
          }
          .banner-adv{
              width:100%;
              height:200px;
              display:-webkit-box;
              display:box;
              background:#0D6CB0;
          }
          .list{
              width:100%;
              height:90px;
              display:-webkit-box;
              box-orient:horizontal;
              display:box;
          }
          .list div{
               -webkit-box-flex:1;
               box-flex:1;
               text-align:center;
               line-height:90px;
          }
          .list div:nth-of-type(1){
               background:#DE5246;
          }
          .list div:nth-of-type(2){
               background:#19A25F;
          }
          .list div:nth-of-type(3){
               background:#FF8080;
          }
          .list div:nth-of-type(4){
               background:#F4CD0B;
          }
          .list div:nth-of-type(5){
               background:#9EDA45;
          }
          .list-Two{
              margin:15px 0 0 0;
          }
          .list-Two div:nth-of-type(1){
              background:#B847FF;
          }
          .list-Two div:nth-of-type(2){
              background:#79B900;
          }
          .list-Two div:nth-of-type(3){
              background:#FF2424;
          }
          .list-Two div:nth-of-type(4){
              background:#D2E4F0;
          }
          .list-Two div:nth-of-type(5){
              background:#4CDF2B;
          }
          .con{
              height:200px;
              display:-webkit-box;  /*宣告彈性盒模型*/
              display:box;
          }
          .con div:nth-of-type(1){
              -webkit-box-flex:8;   /*根據父元素分成8等分,佔80%*/
              box-flex:8;
              background:#80B3FF;
          }
          .con div:nth-of-type(2){
              -webkit-box-flex:2;   /*根據父元素分成2等分,佔20%*/
              box-flex:2;
              background:#CD8B37;
          }
 </style>
</head>
<body>
     <header class="parent">
           <div class="left">左邊</div>
           <div class="center">
                   <form>
                        <input type="search" name="">
                   </form>
           </div>
           <div class="right">右邊</div>
     </header>
     <div class="banner-adv"></div>
     <section class="list">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
     </section>
     <section class="list list-Two">
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>9</div>
     </section>
     <div class="con">
          <div></div>
          <div></div>
     </div>
</body>
</html>

例項效果圖如下所示

display-box.gif
新版本的彈性盒模型實現頁面自適應
html內容結構程式碼

<header class="parent">
           <div class="left">左邊</div>
           <div class="center">
                   <form>
                        <input type="search" name="">
                   </form>
           </div>
           <div class="right">右邊</div>
     </header>
     <div class="banner-adv"></div>
     <section class="list">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
     </section>
     <section class="list list-Two">
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>9</div>
     </section>
     <div class="con">
          <div></div>
          <div></div>
     </div>

css層疊樣式程式碼

*{
    padding:0;
    margin:0;
}
body{
    font-family:"微軟雅黑";
    font-size:16px;
}
.parent{
    display:-webkit-flex;     /*宣告彈性盒模型*/
    display:flex; 
}
.left,.right{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
}
.left{
    background:#abcdef;
}
.right{
    background:#DD4F43;
}
.center{
    -webkit-flex:1; /*一定要注意加上瀏覽器字首,否則就會失效*/
    flex:1;
}
.center input{
    width:100%;
    height:40px;
    outline:none;
}
.banner-adv{
    width:100%;
    height:200px;
    display:-webkit-box;
    display:box;
    background:#0D6CB0;
}
.list{
    width:100%;
    height:90px;
    display:-webkit-flex;
    display:flex;
}
.list div{
    -webkit-flex:1;
    flex:1;
    text-align:center;
    line-height:90px;
}
.list div:nth-of-type(1){
    background:#DE5246;
}
.list div:nth-of-type(2){
    background:#19A25F;
}
.list div:nth-of-type(3){
    background:#FF8080;
}
.list div:nth-of-type(4){
    background:#F4CD0B;
}
.list div:nth-of-type(5){
    background:#9EDA45;
}
.list-Two{
    margin:15px 0 0 0;
}
.list-Two div:nth-of-type(1){
    background:#B847FF;
}

              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    移動端適配以及百分比佈局與rem比較
      
                
前言
對於熟悉pc端的小夥伴來說,對於靜態頁面的佈局,一般都是沒有什麼問題的,為了保持各瀏覽器顯示的一致性,無論是選擇優雅降級還是漸進增強,我們有時不得不做相容性處理,比如css中的hack技術,css3中新增屬性新增一些瀏覽器字首等,但在移動端對h5新增的屬性都比較友好, 

  
 

    

    
    移動端適配+響應式佈局+從設計圖到CSS（rem+viewport+媒體查詢+Sass）
      
                轉自：https://www.cnblogs.com/gymmer/p/6883063.html根據UI圖對移動端的h5頁面做樣式重構，是前端工程師的本職工作，看似簡單，不過想做好卻並不容易。下面總結一下其中要點。remrem是一種相對長度單位，參考的基準是<html& 

  
 

    

    
    移動端適配方案以及rem和px之間的轉換
      場景   adding   區間   tin   每一個   left   ios7   分辨率   user   背景


開發移動端H5頁面


面對不同分辨率的手機


面對不同屏幕尺寸的手機


視覺稿
在前端開發之前，視覺MM會給我們一個psd文件，稱之為視覺稿。
對於移動端開發而言，為了做到頁面高 

  
 

    

    
    【VUE移動端適配】VUE使用flexible佈局
       
 
 配置 flexible 
 安裝 lib-flexible 
 在命令列中執行如下安裝： 
 npm i lib-flexible --save 
 引入 lib-flexible 
 在專案入口檔案 main.js 裡 引入 lib-flexible 
 // main.js
import 'li 

  
 

    

    
    【移動端適配方案二    彈性佈局】Flex彈性佈局+rem實現移動端適配（JS+rem+viewport）
      
                前端開發工程師根據UI設計師給的設計稿進行開發。為了保證在各種螢幕上的不失真，就要根據實際螢幕寬度做等比例換算，才能寫進CSS實現如下：1、設定width=device-width 也就是將layout viewport（佈局視口）的寬度設定 為ideal viewport（ 

  
 

    

    
    【移動端適配方案一    彈性佈局】@media標籤+rem+viewport實現移動端螢幕適配
      
                一、從設計稿說起：採用rem來佈局，其實設計稿是多大都沒有關係，設計稿給480、600或者750都可以，其他尺寸也可以，你就想成它是一張A4紙，然後這些數字只是對這張紙的最大計量單位。反正一張圖就那麼大，無論計量單位是多少，UI設計師能夠在一張A4上給的東西都是一樣的。比如說 

  
 

    

    
    關於Html5移動端適配不同解析度的佈局總結
      
                關於現在比較流行的一些框架比如bootstrap，用得多的人會發現bootstrap確實在做扁平化風格的網站方面，提供了很大的便利，適配不同解析度的pc端，包括能適配到移動端。但是就我個人而言，從pc端適配到移動端這種一整套的方式還是有所不妥的，畢竟pc端顯示的內容相對於移動 

  
 

    

    
    移動端適配的問題
      sets   設置寬和高   view   書寫   dev   是否   文件   並且   ini   在書寫移動端項目的時候，我們必不可少的就是meta標簽的viewport視圖：
<meta name="viewport" content="width=device-width,initial- 

  
 

    

    
    關於移動端適配
      不同的   不協調   根據   -s   query   關於   沒有   大小   根目錄   通常移動端的布局方式
1、rem布局，通過動態設置根目錄下的font-size達到元素大小“自適應”，通常和百分比布局一起使用
2、固定像素設固定視口寬度。
3、最費事的media query，根據設備視口寬 

  
 

    

    
    html移動端適配方案rem
      開發   .cn   大小   需要   擁有   bsp   one   公式   計算   為了做到一次開發的網頁能夠在不同尺寸的移動端設備上適配，我們需要使設計稿上標註的固定尺寸在不同設備上按照設備大小的比例顯示不同的尺寸。
比如設計稿是按照 IPhone6 的 750px 像素設計的，設計稿上的頭部導 

  
 

    

    
    移動端適配·
      idt   size   min   width   移動端   htm   div   -s   med   
 
 
 
 
 
@media screen and (min-width: 320px) {html{font-size:85.5px;}}
@media screen and (min-wi 

  
 

    

    
    移動端適配之rem 筆記
      mcal   ont   padding   字體大小   頁面   所有   1.2   resize   筆記   
/*移動端適配 width|height|font-size = 視覺稿量出來的值 / 100rem;@lbl*/
@media screen and (max-width:359px)  

  
 

    

    
    對移動端適配自己的理解
      data   標簽   自己的   html   手機   cep   box   on()   根據   在寫移動端H5頁面的時候，最讓人頭疼的就是適配問題：
接下來是我給我的最佳的解決方案和一個小例子
第一步：適配js(rem.js)
/** *這裏我們提取了一個公式(rem表示基準值) *rem基準值  

  
 

    

    
    移動端適配理解收集
      並不是   ava   一個點   概念   ble   java   web   處理   imu   移動端相應式測試網站：http://kuapingce.com/
http://www.cnblogs.com/Charliexie/p/6900640.html
https://segmentfau 

  
 

    

    
    關於移動端適配問題
      on()   window   win   inpu   wid   css   移動   dia   num   移動端適配采用rem進行編寫CSS，整理了三種方案：
　　方案一：
　　　　簡單的JS適配
function resizeRoot(width){    var deviceWidth=docu 

  
 

    

    
    移動端適配video適配
      stat   initial   title   htm   form   posit   obi   orm   ephone   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"& 

  
 

    

    
    移動端適配問題
      不支持   不同   toolbar   手機屏幕   con   技術分享   form   三星   round        原文鏈接：https://www.cnblogs.com/MaggieGao/p/6994868.html
 

一  怎麽書寫可以適用於不同設備的頁面 

　　　1 自動適應屏 

  
 

    

    
    移動端適配難點
      js動態生成   有一個   分辨   sca   idt   單位   ble   imu   寬高   1.移動端開發通常都會在html中寫下以下的meta標簽

<meta name="viewport" content="width=device-width, initial-scale=1 

  
 

    

    
    前端開發知識之前端移動端適配總結
      演示   等於   不同   無效   這也   sta   一個   name   物理   meta標簽到底做了什麽事情
做過移動端適配的小夥伴一定有遇到過這行代碼：
<meta name="viewport" content="width=device-width, initial-scale=1 

  
 

    

    
    在vue中使用flexible---移動端適配
      node   vue   nim   html   nod   ces   blank   css   utils   配置 flexible
安裝 lib-flexible
在命令行中運行如下安裝：

npm i lib-flexible --save

引入 lib-flexible
在項目入口文件 ma

移動端適配以及百分比佈局與rem比較

前言

pc端網站與移動端(手機)網站區別

為什麼要做適配

怎麼做適配,有哪些適配方案

用100%佈局適配

Flex佈局適配,最為強大

移動端適配以及百分比佈局與rem比較

移動端適配+響應式佈局+從設計圖到CSS（rem+viewport+媒體查詢+Sass）

移動端適配方案以及rem和px之間的轉換

【VUE移動端適配】VUE使用flexible佈局

【移動端適配方案二彈性佈局】Flex彈性佈局+rem實現移動端適配（JS+rem+viewport）

【移動端適配方案一彈性佈局】@media標籤+rem+viewport實現移動端螢幕適配

關於Html5移動端適配不同解析度的佈局總結

移動端適配的問題

關於移動端適配

html移動端適配方案rem

移動端適配·

移動端適配之rem 筆記

對移動端適配自己的理解

移動端適配理解收集

關於移動端適配問題

移動端適配video適配

移動端適配問題

移動端適配難點

前端開發知識之前端移動端適配總結

在vue中使用flexible---移動端適配