doudou.gif

前言

對(duì)于熟悉pc端的小伙伴來(lái)說(shuō),對(duì)于靜態(tài)頁(yè)面的布局,一般都是沒(méi)有什么問(wèn)題的,為了保持各瀏覽器顯示的一致性,無(wú)論是選擇優(yōu)雅降級(jí)還是漸進(jìn)增強(qiáng),我們有時(shí)不得不做兼容性處理,比如css中的hack技術(shù),css3中新增屬性添加一些瀏覽器前綴等,但在移動(dòng)端對(duì)h5新增的屬性都比較友好,無(wú)需考慮pc端諸多繁瑣的兼容性問(wèn)題,但這并不意味不存在兼容性問(wèn)題,因?yàn)橐苿?dòng)設(shè)備很多(ios,android等)

各設(shè)備分辨率不一致,那么同樣為保持在各個(gè)設(shè)備上顯示一致性,我們必須得進(jìn)行適配處理,對(duì)于接觸得少移動(dòng)端的童鞋來(lái)說(shuō),往往從設(shè)計(jì)師那拿到psd文檔,如果依然按照pc端的處理方式,絕對(duì)是走不通的,有時(shí)卻不知如何下手,往往處理得不是很好,一聽(tīng)到什么rem適配,100%布局,對(duì)于熟悉使用固定像素值的方式的童鞋來(lái)說(shuō),剛開(kāi)始內(nèi)心是焦慮的

對(duì)于如何選擇什么樣的方式很好的進(jìn)行頁(yè)面布局實(shí)現(xiàn)內(nèi)容結(jié)構(gòu)良好的的展現(xiàn),非?？鄲?而在頁(yè)面交互上,元素觸發(fā)事件等與pc端也有很大的不同,對(duì)于移動(dòng)端的學(xué)習(xí),我也一直在學(xué)習(xí)當(dāng)中,今天給大家分享一下自己的學(xué)習(xí)心得,把自己曾學(xué)過(guò)的東西進(jìn)行總結(jié)梳理了一下

pc端網(wǎng)站與移動(dòng)端(手機(jī))網(wǎng)站區(qū)別

jd.gif

• 移動(dòng)端的網(wǎng)絡(luò)速度手機(jī)用戶大多是通過(guò)2G,3G,4G網(wǎng)絡(luò)來(lái)上網(wǎng),網(wǎng)絡(luò)速度遠(yuǎn)低于大部分PC常用的有線網(wǎng)絡(luò)的,所以移動(dòng)端網(wǎng)頁(yè)如果過(guò)大,加載時(shí)間就會(huì)越長(zhǎng),會(huì)增加網(wǎng)頁(yè)訪問(wèn)的跳出率,對(duì)于移動(dòng)端來(lái)說(shuō),所有的加載速度必須在1秒之內(nèi),所以移動(dòng)端的性能優(yōu)化必須要考慮的問(wèn)題,包括圖片加載,文件大小等,具體性能優(yōu)化,可參考往期,不可不知的前端性能優(yōu)化文章
• PC端上,頁(yè)面的交互都是鼠標(biāo)點(diǎn)擊,滾輪等操作,而在手機(jī)上,都是手指觸屏,滑屏操作,頁(yè)面元素上的按鈕,鏈接等也要大小適中,適合手指點(diǎn)擊,在事件處理上也有很大的區(qū)別
• PC端兼容性繁多(三個(gè)祖中ie678得供著),而移動(dòng)端無(wú)需考慮,更新快,對(duì)h5新增的屬性,兼容性都很好,頂多加上webkit內(nèi)核前綴,但是這并不意味著在各個(gè)手機(jī)瀏覽器顯示相同,什么UC,QQ瀏覽器仍然是需要特殊兼容性處理的
• pc端,頁(yè)面布局,設(shè)計(jì)稿多大,基本上按照psd文檔,按照1:1切圖,固定寬度,高度,圖片已切出來(lái)的實(shí)際尺寸大小進(jìn)行填充即可,但是在移動(dòng)端上,則不行,手機(jī)端的分辨率比較高,至于這個(gè)分辨率(它指的是顯示屏橫縱能夠容納的像素點(diǎn),比如1366x768)表示的是橫向能容納1366個(gè)像素點(diǎn),而縱向能容納768個(gè)像素點(diǎn),分辨率越高,像素點(diǎn)越多,圖片就越清晰
• 在pc端,1px像素和瀏覽器端的像素可以一一對(duì)應(yīng),按照設(shè)計(jì)師給出的psd文檔按照1:1的方式來(lái)做就行了,ps軟件中,量出多大的尺寸,對(duì)應(yīng)的css里面就設(shè)置多少像素,而在移動(dòng)端,設(shè)備屏幕尺寸比較小,分辨率比較大,比如提高分辨率原先320到640的或者750,960的，提高到兩倍，三倍，但是提高之后,css的像素還是依然沒(méi)有改變,在pc端是一個(gè)像素,而到移動(dòng)端,可能就是兩像素,三像素,所以一般針對(duì)移動(dòng)端的設(shè)計(jì)稿,常見(jiàn)的做法事,從設(shè)計(jì)稿量中量出來(lái)的尺寸,切出來(lái)圖,在實(shí)際給元素設(shè)置尺寸時(shí),都應(yīng)對(duì)應(yīng)的減半(2:1,或者3:1)的方式進(jìn)行設(shè)置尺寸(比如設(shè)計(jì)稿是960,750,640的的圖,那么減半就是320,375,320的),頁(yè)面中字體,圖片對(duì)應(yīng)減半設(shè)置即可
• 新的API,獲取元素的方法,比如document.querySelector(),document.querySelectorAll(),雖然在性能上不如舊的選擇器,但是用著方便,一些移動(dòng)端框架用該選擇器比較多,比如jQuery Mobile，sui Mobile,mui等
• pc端的事件不適合在移動(dòng)端用,比如click(會(huì)有300毫秒延遲),移動(dòng)端上用ontouchstart(手指按下),ontouchmove(手指移動(dòng)),ontouchend,但是注意的是在Google模擬器下使用on的方式添加touch事件會(huì)無(wú)效,具體怎么解決這種問(wèn)題,可以通過(guò)addEventListener()的綁定方式,注意用此方法監(jiān)聽(tīng)事件時(shí),就不要帶on,具體見(jiàn)下代碼所示
• 針對(duì)移動(dòng)端一像素偏差問(wèn)題,與像素比有關(guān)系,也就是所謂的物理像素(分辨率)與獨(dú)立像素(屏幕的寬度),pc端一像素就是一像素,但是在移動(dòng)端1像素,有時(shí)就不是一像素,也許是兩像素,三像素的
  • 通過(guò)添加偽類(lèi)的方式,同時(shí)改變transform:scale(0.5),縮小為一半
  • 設(shè)置div寬度為1像素,同時(shí)設(shè)置IE怪異盒模型,box-sizing:border-box
  • 一像素的背景圖片替代
• 手機(jī)網(wǎng)站不適合用作響應(yīng)式,比如:bootstrap等,因?yàn)樗苤?不輕量,在pc端網(wǎng)絡(luò)帶寬下加載還是可以的,但是在移動(dòng)端,就很耗性能來(lái),耗流量,耗電..太過(guò)于臃腫,而影響網(wǎng)頁(yè)的加載
• 布局方面,移動(dòng)端,少用浮動(dòng),會(huì)破壞文檔流,不易拓展,多用Flex布局,移動(dòng)端上Ie怪異盒模型也是很常用,對(duì)于改變?cè)匚恢?通常用translate,而不用定位,改變left,top值
• PC端上,用固定像素值px作為元素設(shè)置尺寸單位,而在移動(dòng)端,通常用rem(root 根節(jié)點(diǎn)根據(jù)html的字體大小計(jì)算其他元素尺寸),或者100%,
• ...

為什么要做適配

• 為了適應(yīng)各個(gè)移動(dòng)終端設(shè)備屏幕尺寸,完美的呈現(xiàn)應(yīng)有的布局效果
• 手機(jī)端上的響應(yīng)式不能用在手機(jī)app上,非常耗性能,耗流量,耗電
• 各個(gè)移動(dòng)端設(shè)備,分辨率大小不一致,網(wǎng)頁(yè)鋪滿整個(gè)屏幕,并在各種分辨下等比例縮放,不失真
• h5頁(yè)面直接可以在安卓,ios上引用(也就是所謂的混合hybrid App,指的是開(kāi)發(fā)一個(gè)App一部分功能用native構(gòu)建,一部分功能用html5構(gòu)建,套殼,比如:phoneGap(Cordova))

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

• 流式布局,視口(viewport)寬度與設(shè)備等寬,做自適應(yīng),100%或者具體像素值
• 固定高度,寬度百分比適配,flex布局,這種方式比較適合布局均勻,適合100%布局,內(nèi)容結(jié)構(gòu)不復(fù)雜
• 固定寬度,設(shè)定一個(gè)標(biāo)準(zhǔn)值(比如以640為準(zhǔn)),改變縮放比例(動(dòng)態(tài)的創(chuàng)建meta標(biāo)簽,改變縮放比例)
• rem做適配,在不同的設(shè)備上顯示不同的效果
• 像素比適配:像素比 = 物理像素/獨(dú)立像素(這種比較繁瑣,難以理解,以后再詳談)

用100%布局適配

• 適合頁(yè)面內(nèi)容結(jié)構(gòu)均勻分配,固定高度,結(jié)構(gòu)不是很復(fù)雜,注意要設(shè)置viewport視口內(nèi)容寬度等于設(shè)備的寬度
  如下示例代碼如下
html內(nèi)容結(jié)構(gòu)樣式代碼

<!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>固定高度,寬度自適應(yīng),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;        /*兩邊固定寬度,中間自適應(yīng)*/
                height:40px;       /*高度可以不加,由內(nèi)容填充*/
                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;       /*兩邊固定寬度,中間自適應(yīng)*/
                height:40px;      /*高度可以不可,由內(nèi)容填充*/
                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;     /*子元素使用來(lái)浮動(dòng),父元素記得清除浮動(dòng)*/
                text-align:center;
                line-height:200px;
             }
             .left-80{
                width:80%;
                height:100%;  /*想要一個(gè)元素在頁(yè)面中顯示必須得給元素高度,繼承父元素*/
                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內(nèi)容開(kāi)始-->
      <div class="con">
            <div class="left-80">左邊80%</div>
            <div class="right-20">右邊20%</div>
      </div>
      <!-- con內(nèi)容結(jié)束-->
</body>
</html>

如下gif圖所示

100%布局.gif

Flex布局適配,最為強(qiáng)大

• 同樣是適合頁(yè)面內(nèi)容結(jié)構(gòu)均勻分配,固定高度,注意要設(shè)置viewport視口內(nèi)容寬度等于設(shè)備的寬度
• 老版本的display:box與新版本的display:flex都可以實(shí)現(xiàn)頁(yè)面的自適應(yīng)
  示例代碼如下所示
用老版本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實(shí)現(xiàn)頁(yè)面的自適應(yīng)</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; /*一定要注意加上瀏覽器前綴,否則就會(huì)失效*/
                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;   /*根據(jù)父元素分成8等分,占80%*/
                box-flex:8;
                background:#80B3FF;
             }
             .con div:nth-of-type(2){
                -webkit-box-flex:2;   /*根據(jù)父元素分成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>

實(shí)例效果圖如下所示

display-box.gif

<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; /*一定要注意加上瀏覽器前綴,否則就會(huì)失效*/
    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;
}
.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-flex;  /*聲明彈性盒模型*/
    display:flex;
}
.con div:nth-of-type(1){
    -webkit-flex:8;   /*根據(jù)父元素分成8等分,占80%*/
    flex:8;
    background:#80B3FF;
}
.con div:nth-of-type(2){
    -webkit-flex:2;   /*根據(jù)父元素分成2等分,占20%*/
    flex:2;
    background:#CD8B37;
}

實(shí)現(xiàn)的效果圖同上所示

固定寬度,設(shè)定一個(gè)標(biāo)準(zhǔn)值(比如以640為準(zhǔn)),改變縮放比例(動(dòng)態(tài)的創(chuàng)建meta標(biāo)簽,改變縮放比例)

• 固定寬度,viewport縮放(width=640)量的是640px,但是實(shí)際上縮小2倍就可以了的
  自己設(shè)置一個(gè)640等寬度,然后進(jìn)行等比例縮放(目前低版本的安卓不支持) 讓640px像素的東西,縮放到iphone5 320的尺寸當(dāng)中去,怎么個(gè)縮放呢,讓寬度等比例縮放,高度自適應(yīng),所以這樣看起來(lái)就不會(huì)失真,讓寬高度等比例的縮放,按照640來(lái)進(jìn)行切圖

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

viewport:視口寬度,設(shè)備的屏幕上能用來(lái)顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域()瀏覽器上(也可能是一個(gè)app中的webview)用來(lái)顯示網(wǎng)頁(yè)的那部分區(qū)域)

content:描述視口內(nèi)容,width=device-width,網(wǎng)頁(yè)內(nèi)容寬度等于設(shè)備的寬度

initial-scale:()初始縮放比例),能夠起到和width=device-width相同的效果(把理想的視窗設(shè)置為設(shè)備寬度),兩個(gè)配合使用能夠很好的解決移動(dòng)端各設(shè)備的適配問(wèn)題

maximum-scale:最大縮放比例

minimum-scale最小縮放比例

user-scaleable:如果值是0或者no,表示禁止用戶手指縮放
html內(nèi)容結(jié)構(gòu)

 <div>
      ![](img/06chugui.jpg)
      ![](img/07shoubiao.jpg)
      ![](img/08zhoumojiadain.jpg)
      ![](img/09junzi.jpg)
 </div>

css層疊樣式

*{
    padding:0;
    margin:0;
}
div{
    width:640px;
}
img{
    width:100%;
    display:block;
}

js代碼

 /*
 * 固定頁(yè)面的尺寸,做一個(gè)640的頁(yè)面為標(biāo)準(zhǔn),然后進(jìn)行等比例縮放,整個(gè)頁(yè)面會(huì)跟著寬度等比例縮放
* @function scaleFun 等比例縮放函數(shù)
* @Object {Number} screenWidth:獲取window屏幕的寬度
* @number fixedWidth 設(shè)置頁(yè)面固定寬度
* @number {scale} 縮放比例,屏幕(設(shè)備)的寬度/固定的寬度
* @Object {createMeta} 動(dòng)態(tài)的創(chuàng)建meat標(biāo)簽元素
* @Object {metaAttr} 定義一個(gè)對(duì)象,設(shè)置添加屬性
* @for..in循環(huán),將metaAttr的屬性添加到createMeta中去
* @將meta標(biāo)簽添加到head頭部中去
*/
 window.onload = function(){
    // 等比例縮放函數(shù)
   function scaleFun(){
     var screenWith = window.screen.width; // 獲取window屏幕的寬度
     var fixedWidth = 640;    // 固定寬度
     var scale = screenWith/fixedWidth;  //縮放比例 window屏幕的寬度/固定寬度,這里的640看設(shè)計(jì)圖紙給的像素,如果是750那么就寫(xiě)750,計(jì)算縮放比
     var createMeta = document.createElement("meta");// 動(dòng)態(tài)的創(chuàng)建meta標(biāo)簽 
     // 設(shè)置屬性
     var metaAttr = {
        name:"viewport",
        content:'width='+fixedWidth+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=no'
     }
    for(var key in metaAttr){
        createMeta[key] = metaAttr[key];
    }
    // 將createMeat添加到head頭中
document.getElementsByTagName("head")[0].appendChild(createMeta);
/*
createMeta.setAttribute('name','viewport');                                             createMeta.setAttribute('content','width='+fixedWidth+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(createMeta);
*/
}
scaleFun();                 
}

實(shí)例效果演示如下

動(dòng)態(tài)創(chuàng)建meat標(biāo)簽固定設(shè)備寬度等比例縮放.gif

rem做適配,在不同的設(shè)備上顯示不同的效果

• 根據(jù)不同屏幕設(shè)備分辨率動(dòng)態(tài)設(shè)置html的文字大小,達(dá)到等比縮放的功能
• 在不同的移動(dòng)終端顯示不同的元素等比例縮放效果
• 把設(shè)計(jì)圖的寬度分成多少分之一,根據(jù)實(shí)際情況,不是你想分成多少就多少,一般10等分,16,20等分的
• 保證html最終算出來(lái)的字體大小,不小于12px(Google瀏覽器下,最小字體大小為12px,設(shè)置像素值小于它,仍是12px,但是在firefox瀏覽器下小于12px,仍然是可以減小生效的,太小了字體看不清,影響用戶體驗(yàn))
  html內(nèi)容結(jié)構(gòu)

  <div class="spanText">歡迎關(guān)注微信itclan公眾號(hào)</div>
  <div class="imgList">
        ![](img/06chugui.jpg)
        ![](img/07shoubiao.jpg)
        ![](img/08zhoumojiadain.jpg)
        ![](img/09junzi.jpg)
  </div>

css層疊樣式
less預(yù)處理器

@rem:40rem   // 這里的rem怎么確定,根據(jù)你設(shè)計(jì)稿尺寸,根據(jù)有js中把網(wǎng)頁(yè)(設(shè)計(jì)圖)分成多少等分,動(dòng)態(tài)的設(shè)置html根節(jié)點(diǎn)的大小,這里分成16等分,比如設(shè)計(jì)稿是640那么1rem就等于640/16=40px,如果設(shè)計(jì)稿是320,同理320/16=20
*{
    padding:0;
    margin:0;
}
body{
    overflow-x:hidden;
}
div.imgList{
    width:720/@rem;
}
img{
    display:block;
}
div.spanText{
    text-align:center;
    font-size:40/@rem;
}

編譯出來(lái)的對(duì)應(yīng)的css

*{
   padding:0;margin:0
}
body{
   overflow-x:hidden
 }
 div.imgList{
    width:18rem
 }
 img{
    width:18rem;
    display:block
 }
 div.spanText{
    text-align:center;
    font-size:1rem
}

js代碼

window.onload = function(){
  var html = document.querySelector("html");  // 獲取根節(jié)點(diǎn)html,用h5新增的選擇器
  var timer = null;
  // 動(dòng)態(tài)的獲取設(shè)置根節(jié)點(diǎn)fontSize大小
  function changeRem(){ 
  var htmlWidth = html.getBoundingClientRect().width; // 獲取網(wǎng)頁(yè)的寬度,也就是屏幕的寬度
 html.style.fontSize = htmlWidth/16+"px";// 把網(wǎng)頁(yè)(設(shè)計(jì)圖)分成多少等分,動(dòng)態(tài)的設(shè)置html根節(jié)點(diǎn)的大小,這里分成16等分
}
// 頁(yè)面尺寸發(fā)生改變時(shí),重新計(jì)算文字等大小,功能函數(shù)
function Time(){
    clearTimeout(timer);
    timer = setTimeout(function(){  
       changeRem();
    },10)
}
// 瀏覽器窗口發(fā)生變化時(shí)
   window.addEventListener('resize',function(){ 
   Time();
});
// 頁(yè)面加載的時(shí)候,如果調(diào)用緩存的話,在次執(zhí)行changeRem
 window.addEventLister('pageshow',function(e){
      if(e.persisted){  // 判斷有沒(méi)有緩存
         Time();
      }
  })
}

實(shí)例如下圖所示

rem布局適配更改html根標(biāo)簽fontSize.gif

• 使用方式：直接打開(kāi)koala工具,找到對(duì)應(yīng)的less文件夾,添加到考拉工具當(dāng)中,直接刷新編譯less或者sass文件即可,會(huì)自動(dòng)的生成對(duì)應(yīng)的css文件,注意在html內(nèi)容頁(yè)面中引入的是css文件,而不是less文件
  
  考拉工具的使用.gif
  
  當(dāng)然如果你不喜歡使用考拉工具,也可以使用cssrem插件,在sublime,autom,webstorm等編輯器中安裝cssrem插件,會(huì)自動(dòng)的將px轉(zhuǎn)換為rem
  如何安裝cssrem插件,自動(dòng)的將px轉(zhuǎn)換成rem,這里以sublimeText3為例
  打開(kāi)sublimeText編輯器=>菜單欄找到perferences菜單=>Browse Package瀏覽程序包=>將cssrem文件夾復(fù)制粘貼到packages目錄下=>perferences菜單欄->Package settings->cssrem->settings-Default->把 "px_to_rem" 的值變?yōu)樵O(shè)計(jì)稿的 rem基準(zhǔn)值(設(shè)計(jì)稿寬度/html根節(jié)點(diǎn)設(shè)置的多少等分).保存
  sublime安裝cssrem程序包如下gif所示
  
  cssrem設(shè)置.gif
  
  驗(yàn)證cssrem是否安裝成功,在給元素設(shè)定具體px時(shí)自動(dòng)轉(zhuǎn)換就已經(jīng)證明cssrem插件安裝成功了.這遠(yuǎn)比拿著計(jì)算器算什么的要快得多,如果一個(gè)一個(gè)算,那簡(jiǎn)直是噩夢(mèng),如果有懷疑,其實(shí)你借助控制臺(tái)計(jì)算也是可以的
  
  cssRem插件自動(dòng)轉(zhuǎn)換.gif
  
  總結(jié)
  本篇主要介紹了移動(dòng)端適配以及rem布局與100%布局比較,pc端網(wǎng)站與移動(dòng)端(手機(jī))網(wǎng)站區(qū)別,相同點(diǎn)與不同點(diǎn),為什么要做適配,以及怎么做適配,常用適配方式為流式布局,視口(viewport)寬度與設(shè)備等寬,做自適應(yīng),100%布局,flex布局或者具體像素值以及固定寬度,設(shè)定一個(gè)標(biāo)準(zhǔn)值(比如以640為準(zhǔn)),改變縮放比例(動(dòng)態(tài)的創(chuàng)建meta標(biāo)簽,改變縮放比例)還有rem做適配,在不同的設(shè)備上顯示不同的效果,以及用koala工具將less轉(zhuǎn)換為css,最后為為強(qiáng)悍的是安裝cssrem插件的方式將px快速的轉(zhuǎn)換為rem,強(qiáng)烈推薦使用該方法,其實(shí)移動(dòng)端的東西與pc端的區(qū)別還是挺多的,雖然在從技術(shù)上都是html+css+javascript,但是也有一些區(qū)別得,至于更多的心得體會(huì)我也一直在學(xué)習(xí)當(dāng)中,至于文章中的源碼以及cssrem插件,點(diǎn)擊下方閱讀原文進(jìn)入github,clone下載即可

以下是本篇提點(diǎn)概要

• pc端網(wǎng)站與移動(dòng)端(手機(jī))網(wǎng)站區(qū)別,相同點(diǎn)與不同點(diǎn)
• 為什么要做適配
• 怎么做適配,有哪些適配方案
• 用100%布局適配
• Flex布局適配,最為強(qiáng)大,老舊版本彈性盒模型都可以,但是要注意瀏覽器前綴,兼容性
• 固定寬度,設(shè)定一個(gè)標(biāo)準(zhǔn)值(比如以640為準(zhǔn)),改變縮放比例(動(dòng)態(tài)的創(chuàng)建meta標(biāo)簽,改變縮放比例)
• rem做適配,在不同的設(shè)備上顯示不同的效果,koala工具與cssrem插件的使用