29.html5 移動端開發總結

阿新 • • 發佈：2018-03-04

手機 kit you 技巧運動 dev 方式 include andro

手機與瀏覽器

瀏覽器:

移動端開發主要針對手機，ipad等移動設備，隨著地鐵裏的低頭族越來越多，移動端開發在前端的開發任務中站的比重也越來越大。各種品牌及尺寸的手機也不盡相同。尺寸不同就算了分辨率，視網膜屏自動的各種內核的瀏覽器，想想頭都大了。
先說下瀏覽器。在中國有多少種瀏覽器？

ie、百度、360、搜狗、火狐、歐朋、Chrome、谷歌、行者無疆、財貓省錢、遨遊、Wise光速、UC、智慧、QQ、海豚。。。（大概有70-80多種）

五花八門，還好不用擔心這都是表象。雖然瀏覽器各不相同但從瀏覽器的內核來看基本分為四種：

瀏覽器內核：

1、Trident內核：IE最先開發或使用的，也稱IE內核，360瀏覽器使用的也是IE內核。

使用IE內核的還包括:: 世界窗（The World）; 傲遊瀏覽器（Maxthon）; 騰訊TT（Tencent Traveler）; 帆瀏覽器（Avant Browser）; 360安全瀏覽器（360SE）; 搜狗瀏覽器（兼容模式）（Sougou Explorer）; 瑞影瀏覽器（Rayying; 等等

2、Webkit內核：谷歌chrome瀏覽器最先開發或使用，也叫谷歌內核，楓樹瀏覽器、太陽花使用的也是谷歌內核。

3、Gecko內核： Netscape6開始采用的內核，後來的Mozilla FireFox (火狐瀏覽器) 也采用了該內核，K-Meleon瀏覽器也是使用這種內核。

4、Presto內核：目前只有Opera瀏覽器采用該內核。

聊完瀏覽器再來看下目前主流手機的屏幕分辨率及其屏幕尺寸：

分辨率：

Android：主流機型主要為 480x800, 480x854, 540x960, 720x1280, 800x1280 這五種。（非主流機型還包括：240x320, 320x480, 640x960 這三種，其中兩種都與 iPhone 一致。）
iOS: 主流機型主要為 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 這五種。
WP：主流機型主要為 480x800，720x1280, 768x1280 這三種

屏幕尺寸：

android：一般在4寸-4.8寸之間，也有小到 3.2寸的，也有5寸，7寸，10寸的。
iOS：3.5寸，9.8寸，4.0 寸，7.8 寸。

在流量最大的100種設備中，目前全球最流行的屏幕分辨率為1136*640，排在第二～五位的依次是1920*1080，960*640，1280*720，及800*480。

了解了手機與瀏覽器就能夠有的放矢的去開發一款受歡迎的移動端應用了。但這麽多設備如何下手？

1.Viewport(視窗)

什麽是 Viewport?

viewport 是用戶網頁的可視區域。
viewport 翻譯為中文可以叫做”視區"。

手機瀏覽器是把頁面放在一個虛擬的”窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。

簡單點來講：移動設備上的viewport就是屏幕上能用來顯示我們的網頁的那一塊區域。

viewport不局限於瀏覽器可視區域的大小，一般來講要比瀏覽器的可視區域要大。

一般來講，移動設備上的viewport都是要大於瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對於桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。

技術分享圖片

http://viewportsizes.com 裏面收集了眾多設備的理想寬度。可供大家參考。

很顯然viewport的寬度並不等於設備屏幕的寬度，滾動條和縮放頁面也不是我們想要的效果。那麽怎麽辦呢？改輪到meta標簽收拾殘局了。

開發移動端頁面時，我們最常見的一個寫法就是在head標簽中加入：

<meta name=‘viewport‘ content=‘width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0‘>

它的作用就是讓設備的viewport的width等於設備的width;同時禁止了設備的手動縮放功能。

meta viewport 標簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持

在meta viewport 中有6個屬性，如下：: width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。; height：和 width 相對應，指定高度。; initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。; maximum-scale：允許用戶縮放到的最大比例。; minimum-scale：允許用戶縮放到的最小比例。; user-scalable：用戶是否可以手動縮放。

可以理解 “width=device-width”的作用就是把viewport的寬度變成了設備的寬度，無論豎屏還是橫屏都一樣,回頭看下為什麽我們在手機上打開一個正常的pc端網站，在沒有手動縮放的情況下，頁面會自動縮小到適合手機的屏幕的尺寸？

因為在沒有指定縮放值的情況下，移動設備會自動計算initial-scale的值保證 layout viewport 也就是頁面寬度自動適配瀏覽器的可視寬度。

另外有時候根據項目需要，我們需要隱藏iOs的上下狀態欄實現全屏，只需要再meta標簽中加入如下代碼就能輕松實現：

<meta name="apple-mobile-web-app-capable" content="yes">
    此屬性只針對 iOS，content只有 yes  or no。

2.@media查詢

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

設置好你的meta標簽後就可以利用媒體查詢來實現響應式的開發，當然你也可以使用百分比來實現自適應的開發。視項目需求而定。一般來說移動端開發@media查詢會經常用到。

實例:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
如果瀏覽器窗口小於 500px, 背景將變為淺藍色：

我們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的屏幕大小之內:

	@media (min-width:320px) and (max-width: 640px) { ... }
	如果瀏覽器窗口大於等於 320px小於等於640, 就...

一般來說響應式要適配那些尺寸呢？我們來看一下一個很火的前端響應式框架。bootstrap是如何實現響應式的。

	/* 超小設備（手機，小於 768px） */
/* Bootstrap 中默認情況下沒有媒體查詢 */

/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

bootstrap的分界點是 768px,992px,1200px;基本滿足了需求，可以在開發中參考。

3. px,em,rem,pt

1、PX ：像素（Pixel）

PX是相對長度單位，它是相對於顯示器屏幕分辨率而言的。比較穩定和精確。但在瀏覽器中放大或縮放瀏覽頁面時會出現頁面混亂的情況。

2. EM：相對長度單位

EM是相對於父元素來設計字體大小的。如果當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。
所以在使用 EM 做單位的時候需要一個參考點。一般都是以的“font-size”為基準。

EM 與 PX 的換算公式：
1em=16px；
12px=0.75em,10px=0.625em。

為了使用方便，用em時，我們通常在CSS中的body選擇器中聲明font-size=62.5%（使em值變為 16px*62.5%=10px）, 之後，你只需要將你使用的px值除以10，即可得到em值，如：12px=1.2em, 10px=1em。

但是別忘記了，EM是相對於父元素來設計字體大小的。所以在使用em的時候總是受限於父元素的字體大小，使用起來非常不方便，因為不得不總要去搞清楚父元素的字體大小

計算公式這麽寫才更合理：
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值

不推薦使用。

3、REM ：是CSS3新增的一個相對單位（root em，根em)

REM是相對單位,是em的升級版，rem只會相對html的值，不會受到父級的影響(ie8及以下不兼容),如果你要兼容IE8那麽請慎用，反正我經手的項目中沒要考慮IE8及以下瀏覽器的。
這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。 REM 是相對HTML根元素.這樣就意味著，我們只需要在根元素確定一個參考值，在根元素中設置多大的字體，這完全可以根據項目需求。

實例：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.2rem;/*1.2 × 10px = 12px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

網上大部分教程都是在html選擇器中聲明Font-size=62.5%（10÷16*100%=62.5%）然後直接使用1rem=10px單位進行換算。為什麽是10除以16呢？
因為一般來講：瀏覽器默認的字體大小都是16px;這麽來說。（10÷16*100%=62.5%）這個算法是沒有錯的。但是瀏覽器種類這麽多，誰能保證他們的默認字體都是16px?
除非有人論證過。至少uc瀏覽器的字體就不夠標準，UC瀏覽器可以自定義瀏覽器默認字體。

那該怎麽辦？rem不是相對html的嗎？那就在html裏設置一個絕對值就可以了！比如：

html{
	font-size:10px;
}

那麽1rem=10px;
在寫其他樣式的時候就能以10為根尺寸進行計算了，如：

p{
 font-size:1.2rem;
 line-height:2.2rem;
}

好吧算來算去的也太麻煩了吧！還好網上有換算工具： http://mxd.tencent.com/wp-content/uploads/2014/11/rem.html
以下代碼是工具自動生產的很貼心的有木有？

   @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
     html,body {
         font-size:33.75px;
     }
   }
     @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
     html,body {
         font-size:30px;
     }
   }
     @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
     html,body {
         font-size:25px;
     }
   }
     @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
     html,body {
         font-size:22.5px;
     }
   }
     @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
     html,body {
         font-size:20px;
     }
   }
     @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
     html,body {
         font-size:18.75px;
     }
   }
     @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
     html,body {
         font-size:16.875px;
     }
   }
     @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
     html,body {
         font-size:15px;
     }
   }
     @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
     html,body {
         font-size:12.9375px;
     }
   }
     @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
     html,body {
         font-size:12.5px;
     }
   }
     @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
     html,body {
         font-size:11.71875px;
     }
   }
     @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
     html,body {
         font-size:11.25px;
     }
   }
     @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
     html,body {
         font-size:10px;
     }
   }
     @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
     html,body {
         font-size:7.5px;
     }
   }
  @media only screen and (max-width: 16rem), only screen and (max-device-width:16rem) {
 html,body {
 font-size:0.5rem;
 }
 }

如果覺的@media查詢的寫法太過麻煩也可以考慮使用js來實現！

那麽接下來我們來看下如何用js配合css來實現頁面的自適應。

;
(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 540) { // 最大寬度
            width = 540;
        }
        var rem = width / 10; // 將屏幕寬度分成10份， 1份為1rem
        docEl.style.fontSize = rem + ‘px‘;
    }

    win.addEventListener(‘resize‘, function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener(‘pageshow‘, function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window);

// rem.scss
@charset "utf-8";
$divide: 10;
$pswWidth: 320;
$ppr: 320px/$divide/1rem;// 定義單位

// https://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
@mixin toRem($property, $values...) {
    $max: length($values);
    $remValues: ‘‘;
    @for $i from 1 through $max {
        $value: nth($values, $i) * $divide / $pswWidth;
        $remValues: #{$remValues + $value}rem;
        @if $i < $max {
            $remValues: #{$remValues + " "};
        }
    }
    #{$property}: $remValues;
}

以上解決方案是網友"九色拼盤"給出的解決方案。使用的時候引入以上的js 和sass文件。當如你也可以使用less的寫法。

思路是這樣的：

　　1.通過js設置1rem為1/10屏幕寬度，即根rem 為屏幕寬度的1/10；

2.在開發頁面的時候，（一般設計提供的設計搞都是640px的寬度，或者更大）因為一般來說我們需要適配的屏幕最小寬度為 320px;所以我們以320的尺寸為基礎進行開發。設計稿太大？你可以縮小下嘛，當然切圖還要按 640px或者設計師提供的尺寸進行切圖。

然後cass使用如下：

@import "rem";
.nav-list {
    height: 10px/$ppr;
    @include toRem(margin, 10, 15, 10, 15);
}

js代碼很簡單不解讀了。參考原地址如下：http://www.jianshu.com/p/eb05c775d3c6

問題來了，如果我沒有用cass 或者 less 那麽就沒有 @mixin 方法了。只使用js+css不能實現自動適配嗎？當然可以了

我對上面的代碼做了簡單調整，代碼如下：

var doc = win.document;
    var docEl = doc.documentElement;
    var tid;
    function refreshRem() {
        var baseWidth = 320;
        var baseFontSize=10;
        var width = docEl.getBoundingClientRect().width;
        var rem = width/baseWidth*baseFontSize;
        docEl.style.fontSize = rem + ‘px‘;
    }

    win.addEventListener(‘resize‘, function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener(‘pageshow‘, function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window);

基本思路是，利用js獲取設備屏幕的寬度和原始的320寬度進行對比，看縮放了多少倍。然後再和根rem進行相乘得到的乘積就是變化後的根rem;

公式如下：設備屏幕width/原始開發屏幕width*原始根rem;如：640/320*10

還有一種方法會根據 devicePixelRatio 設定 initial-scale 來放大 viewport，使頁面按照物理像素渲染，提升清晰度。下面是github地址

https://github.com/re54k/mobileweb-utilities/blob/master/util/mobile-util.js

代碼要多些，我沒使用過這個種方法。

5.設備像素比devicePixelRatio

devicePixelRatio其實指的是window.devicePixelRatio

window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips

　dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip常用來輔助區分視網膜設備還是非視網膜設備。

　　可通過如下代碼檢測屏幕 window.devicePixelRatio的值:

window.onload=function(){
 alert(window.devicePixelRatio);
}

所有非視網膜屏幕的iphone在垂直的時候，寬度為320物理像素。。當你使用<meta name="viewport" content="width=device-width">的時候，會設置視窗布局寬度（不同於視覺區域寬度，不放大顯示情況下，兩者大小一致，見下圖）為320px, 於是，頁面很自然地覆蓋在屏幕上。

技術分享圖片

這樣，非視網膜屏幕的iphone上，屏幕物理像素320像素，獨立像素也是320像素，因此，window.devicePixelRatio等於1.

而對於視網膜屏幕的iphone，如iphone4s, 縱向顯示的時候，屏幕物理像素640像素。同樣，當用戶設置<meta name="viewport" content="width=device-width">的時候，其視區寬度並不是640像素，而是320像素，這是為了有更好的閱讀體驗 – 更合適的文字大小。

這樣，在視網膜屏幕的iphone上，屏幕物理像素640像素，獨立像素還是320像素，因此，window.devicePixelRatio等於2.

瀏覽器支持情況：

IE以及FireFox壓根不支持。可能接下來的版本會支持。
Opera桌面瀏覽器時，即使是視網膜設備，返回的值也是1而不是2. 不過，這個bug在後續的版本中會修復的。
Opera Mobile 10不支持，不過Opera Mobile 12正確支持。
UC總是顯示1，不過其viewport屬性有些讓人費解。
最新版本的Chrome瀏覽器能正確實現該屬性。Chrome19返回不準確的1, Chrome22可以正確返回2.
MeeGo WebKit (Nokia N9/N950)就嚇人了：當你應用了meta viewport時候（類似<meta name="viewport" content="width=device-width">），值會從1變成1.5!
Safari, Android WebKit, Chrome 22+(Android), Opera Mobile, BlackBerry WebKit, QQ, Palm WebKit, 及Dolfin都能正確實現該屬性。

1. iOS
類似的，無視網膜設備devicePixelRatio值為1，視網膜設備為2. 因為實際的像素個數是雙倍。不過，iphone似乎不願意改變大家都熟知習慣的320像素寬度布局，沒有把設備寬度一下子變成640像素，因此，dips寬度依然是320, 於是devicePixelRatio就是640/320 = 2.

iOS上的情況要相對簡單些，除了1就是2. 在其他平臺也基本上很簡單，因為一般分辨率都比較挫，devicePixelRatio都是1.

2. Android
據我所知，谷歌的Nexus One是第一個使用dips的，比iphone還早。同時Galaxy Nexus以及Galaxy Note都是類運動視網膜顯示器。近距離探究這三個設備應該會有所收獲。

Nexus One分辨率是480*800, 為了最優的頁面瀏覽，Android WebKit團隊決定縱向手持時候的寬度依然是320像素，因此，devicePixelRatio值為480/320 = 1.5.
在同一手機上，Opera Mobile有相同的結論，dips為320寬，devicePixelRatio也是1.5 .

3. 視網膜MacBook
新的MacBook采用視網膜顯示屏，其devicePixelRatio是（如果不出意外）2. 視網膜MacBook的物理像素是2800×1800，而顯示出分辨率為1400×900，如果把分辨率作為dips層，則devicePixelRatio為2應該是無誤的。

需要指出的是，如果你把分辨率改成1920×1200，devicePixelRatio依然是2. 嚴格來講，這是不準確的，應該是1.5, 然而你也可以說MacBook的分辨率不同於dips層，這種情況下devicePixelRatio在臺式機/筆記本下的定義就不一樣（哪一個？不知道。）。

在任何情況下，根據蘋果的規範做法，devicePixelRatio值只可能是1或者2. 如果你看到2，你要提供視網膜優化顯示圖片，如果是1，使用正常的圖片

當頁面設置了<meta name="viewport" content="width=device-width">時候，document.documentElement.clientWidth在大部分瀏覽器下，得到的是布局視區的寬度，等同於dips的寬度。

對於screen.width的值：

在iOS視網膜設備上，screen.width返回dips寬。因此，在豎著顯示的時候，視網膜顯示屏的ipad和非視網膜顯示屏的ipad返回的都是768.
在上面提到的三個Android設備上，screen.width返回的是物理像素寬度，分別480, 720, 和800. 該設備上的所有瀏覽器都是該值。

Vasilis有一個很好的理論：蘋果像素，因為它想使顯示更清晰，更流暢，而Android廠商增加的像素在屏幕上塞進更多的東西。它解釋了為什麽蘋果強調非視網膜視網膜的連續性，而Android集中在原始像素數。

-webkit-min-device-pixel-ratio的常見值對比:

設備像素為:1.0 (-webkit-min-device-pixel-ratio)

所有non-Retina mac電腦 
蘋果iPhone(第一代) 
蘋果iPhone 3 g 
蘋果iPhone 3 gs 
蘋果iPad(第一代) 
蘋果iPad 2 
蘋果iPad迷你(第一代) 
宏碁Iconia A500 
三星Galaxy Tab 10.1 
三星Galaxy S

設備像素為:1.3 (-webkit-min-device-pixel-ratio)

華碩MemoPad高清7
谷歌Nexus 7(2012型)

設備像素為:1.4 (-webkit-min-device-pixel-ratio)

諾基亞流光(Lumia)520

設備像素為:1.5 (-webkit-min-device-pixel-ratio)

谷歌Nexus S
HTC欲望
HTC Desire HD
HTC不可思議的年代
HTC速度
宏達電的感覺
Kindle Fire高清
三星Galaxy S II
索尼平板電腦Xperia Z
索尼Xperia U

設備像素為:2.0 (-webkit-min-device-pixel-ratio)

所有mac視網膜顯示器
蘋果iPhone 4
蘋果iPhone 4 s
蘋果iPhone 5
蘋果iPhone 5度
蘋果iPhone 5 s
蘋果iPhone 6
蘋果iPad(第三代)
蘋果iPad 4
蘋果iPad的空氣
蘋果iPad迷你(2rd代)
HTC一條X
谷歌的Galaxy Nexus
谷歌Nexus 4
谷歌Nexus 7(2013型)
谷歌Nexus 10
摩托羅拉極限摩托
三星Galaxy S三世
三星Galaxy註意二世
索尼Xperia年代
索尼Xperia T

設備像素為:2.6 (-webkit-min-device-pixel-ratio)

諾基亞流光(Lumia)930

設備像素為:3.0 (-webkit-min-device-pixel-ratio)

HTC(M7)
HTC的蝴蝶
華為榮耀6
蘋果iPhone 6 +
LG G2
聯系5
OnePlus一
相對應的人找到7(X9076)
三星Galaxy S4
三星Galaxy註3
三星Galaxy註4
索尼Xperia Z
小米小米3

參考文獻：https://bjango.com/articles/min-device-pixel-ratio/

了解了devicePixelRatio，我們就可以利用css3的媒體查詢技術來針對非視網膜屏和視網膜屏使用普通圖片和雙倍圖了

.logo{
   background:url("../logo20X20.png"); 
   background-size:20px 20px;
}
@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    background:url("../logo40X40.png"); 
}
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    background:url("../logo40X40.png"); 
}

同時devicePixelRatio也解決了一個移動端很知名的Retina屏移動設備實現1px的問題。

技術分享圖片

Retina屏的分辨率始終保持為普屏的2倍。1px的邊框在devicePixelRatio = 2的retina屏下會顯示成2px，在ipone6 plug 下，更顯示成3px。

.border-bottom-1px(@color){
    position: relative;
    &:after{
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        border-top: 1px solid @color;
        content: ‘‘;
    }
}

@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .border-transform{
        &:after{
            -webkit-transform:scaleY(0.7);
            transform:scaleY(0.7);
            -ms-transform:scaleY(0.7);
            -moz-transform:scaleY(0.7);
        }
    }
}

@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-transform{
        &:after{
            -webkit-transform:scaleY(0.5);
            transform:scaleY(0.5);
            -ms-transform:scaleY(0.5);
            -moz-transform:scaleY(0.5);
        }
    }
}

@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    .border-transform{
        &:after{
            -webkit-transform:scaleY(0.333);
            transform:scaleY(0.333);
            -ms-transform:scaleY(0.333);
            -moz-transform:scaleY(0.333);
        }
    }
}

以上的less文件一個通過：:after偽類+devicePixelRatio 實現了Retina屏1px邊框的問題。

6.移動web中的圖標及字體

1.字體

很多時候，設計師們不管是在設計移動端還是在設計PC端頁面的時候，很喜歡使用"微軟雅黑" "蘭亭黑"等等。但大部分移動設備默認是不支持微軟雅黑，蘭亭黑。

以下為手機默認字體列表：

ios 系統

默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微軟雅黑字體

android 系統

默認中文字體是Droidsansfallback
默認英文和數字字體是Droid Sans
無微軟雅黑字體

winphone 系統

默認中文字體是Dengxian(方正等線體)
默認英文和數字字體是Segoe
無微軟雅黑字體

為了滿足設計師的要求，那麽我們不得不使用服務器字體。

@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中。

@font-face的語法規則：

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

font-family: <YourWebFontName> ：自定義字庫名稱（一般設置為所引入的字庫名），後續樣式規則中則通過該名稱來引用該字庫。
src ：設置字體的加載路徑和格式，通過逗號分隔多個加載路徑和格式
srouce ：字體的加載路徑，可以是絕對或相對URL。
format ：字體的格式，主要用於瀏覽器識別，一般有以下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。
src屬性後還有一個 local(font name) 字段，表示從用戶系統中加載字體，失敗後才加載webfont。

技術分享圖片

實例：

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
     url(‘Sansation_Light.eot‘); /* IE9+ */
}

然後可以引用它：

p {
    font-family:myFirstFont, Helvetica, Arial, sans-serif; 
}

前提是字體已經放在了您的服務器或者本地電腦上。

另外您也可以設置字體的加粗，斜體等效果:

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
     url(‘Sansation_Light.eot‘); /* IE9+ */

font-style: oblique;
font-weight: bold;

建議：如果非必要盡量減少服務器字體的使用，因為字體需要時間來加載，使用許多不同的字體可能會減慢你的網站。

獲取web字體

到Google Web Fonts和Dafont.com下載.ttf格式字體，然後通過Font Squirrel來生成.woff等格式的字體。
以下站點也可以獲取Web字體：
http://webfonts.fonts.com/
http://typekit.com/
http://kernest.com/
http://nicewebtype.com/fonts/

@font-face文件轉換

這裏推薦幾個@font-face文件轉換網站：
freefontconverter:http://www.freefontconverter.com/
font-face generator：https://everythingfonts.com/font-face
Online Font Converter:http://onlinefontconverter.com/
font2web
更多轉換工具可參考地址：http://blog.csdn.net/xiaolongtotop/article/details/8316554

特殊字體已經在你的電腦中了，現在我們需要想辦法獲得@font-face所需的.eot,.woff,.ttf,.svg字體格式。要獲取這些字體格式，我們同樣是需要第三方工具或者軟件來實現，下面我給大家推薦一款常用的一個工具fontsquirrel

另外推薦一個叫字蛛的字體網址：http://font-spider.org/。基本能滿足大家的中文字體需求。

參考網址：http://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html

2.圖標

web中常用的圖標技巧有如下幾種：

　　直接調用img格式的Icon文件，Sprites(俗稱雪碧圖)、Icon Font(字體圖標)、SVG Icon等等

但時代在發展，新設備不斷湧現，有些方法不能很好的滿足開發需求。如：

　　Retina屏幕的出現，如果使用Icon文件，Sprites方法就需要為設備準備 1.5x、2x和3x的圖標素材，那麽Icon Font(字體圖標)、SVG Icon的優勢就很明顯了

使用<img>:

<img>標簽，大家都知道是用來給Web頁面添加圖片的。而圖標(Icons)其實也是屬於圖片，因而在頁面中可以直接使用<img>標簽來加載圖標。並且可以加載任何適用於Web頁面的圖標格式，比如：.jpg(或.jpeg)、.png、.gif。對於今天的Web，除了這幾種圖片格式之外，還可以直接引用.webp和.svg圖像（圖標）。

優勢

更換簡單方便，只需要修改圖標路徑或覆蓋圖標文件名
圖標大小易於掌握

劣勢

增加HTTP請求數，如果頁面使用的圖標過多，直接拉高了HTTP的請求數，也就直接影響頁面的加載性能
不易適配各種終端和分辨率，特別是高PPI的顯示設備，有可能會造成圖標模糊（除非是通過img加載矢量圖標.svg，或者一開始就加載適合高PPI的圖標）
不易修改圖標的樣式，比如顏色，陰影等
不易維護

使用Sprites 圖標(雪碧圖)

`img`可以幫助前端工程師往Web頁面中添加需要的圖標，但其不足之處也是眾所周知的。由於`img`的局限性與不足，2004年3月@Dave Shea提出了一種全新的技術CSS Sprites（在國內常常將這種技術稱為CSS雪碧，又稱CSS精靈）。

CSS Sprites出現之後，很多互聯網團隊都在使用這種技術，比如：

技術分享圖片

Sprites分類

早期CSS Sprites使用的都是位圖，而且為了適合Web頁面使用環境，采用的都是.png文件格式，但在現在只使用位圖，會受到很多的限制，比如在Retina屏下，位圖會模糊。也就是說，為了適配各種終端設備分辨，CSS Sprites不在局限於位圖，也可以將SVG這樣的矢量圖集合在一起。其和位圖最大的不同之處可以根據設備分辨率，調整Sprites的尺寸，從而不影響圖標在設備的呈現質量。

相對而言，SVG更適合當前的Web頁面，當然，這種技術也受到一定的局限性，比如說修改ICON圖標顏色之類，就必須去修改.svg文件，這對於前端人員來說是無法接受。有關於SVG Sprites相關的介紹，可以閱讀

下面相關文章：

如何實現跨瀏覽器的SVG Sprites
SVG Sprite
未來必熱：SVG Sprite技術介紹

優勢

減少HTTP請求數
可以是任意圖形，也可以是任意色彩
兼容性極好（對於位圖的Sprites兼容性都非常的好，但對於SVG的Sprites，還是受到瀏覽器的限制，最起碼要支持SVG的瀏覽器才能得到支持）

劣勢

增加開發時間，需要人肉或通過相關工具，將圖形零散的圖形合並到一起，而不同的合並方式，圖形的色彩對Web的性能有直接的影響；
增加維護成本，要增加新的圖標合成進來，是件較難的事情，甚至直接會影響到前面又定位好的圖片。目前為止，使用自動編譯工具，相對比人肉處理要理想一些；
圖片尺寸固定，在位圖的Sprites中無法通過CSS來修改圖標的大小，但在SVG的Sprites中可以配合CSS的background-size調整圖標的大小；

使用字體圖標(IconFont)

IconFont在今天已經是比較成熟的技術了，現在已經有很多的公開的iconfont 素材庫如：Font-Awesome ，阿裏巴巴等等

使用iconfont對於前端應用來說有很多便捷：

應用步驟：

1.font-face聲明字體技術分享圖片

@font-face {font-family: ‘iconfont‘;
    src: url(‘iconfont.eot‘); /* IE9*/
    src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
    url(‘iconfont.woff‘) format(‘woff‘), /* chrome、firefox */
    url(‘iconfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url(‘iconfont.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */
}

2.定義使用iconfont的樣式

.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
}

3.挑選相應圖標並獲取字體編碼，應用於頁面

<i class="iconfont">&#33</i>

常見問題：

PC端應用常見問題

1、字體圖標在safair或chrome瀏覽器下被加粗？

技術分享圖片

由於字體圖標存在半個像素的鋸齒，在瀏覽器渲染的時候直接顯示一個像素了，導致在有背景下的圖標顯示感覺加粗；所以在應用字體圖標的時候需要對圖標樣式進行抗鋸齒處理，CSS代碼設置如下：

.iconfont{-webkit-font-smoothing: antialiased;}

2、字體圖標在IE7瀏覽器顯示中圖標右側出現小方框現象；

技術分享圖片

出現以上現象可以對引用字體圖標的非塊標簽進行以下CSS定義:

display: block;

3、字體圖標在pc端的chrome瀏覽器下出現嚴重的鋸齒；

技術分享圖片

出現以上現象可以對字體圖標的邊緣進行模糊；（只支持webkit內核瀏覽器,參數數值不宜設置得很大，這會帶來圖標加粗的問題）

-webkit-text-stroke-width: 0.2px;

優點：

1、自由變化大小

2、自由修改顏色

3、可以添加一些視覺效果如：陰影、旋轉、透明度。

4、兼容性強

5、減少了HTTP的請求

6、可以到很CSS很好支持

7、可以做出跟位圖一樣可以做的事情

8、本身體積更小

劣勢

它們只能被渲染成單色或CSS3的漸變色
使用限制性很大，除非你想花時間去創作你自己的字體圖標
創作字體圖標很耗時間
可訪問性差
字體文件體積過大，直接影響頁面加載性能，特別是加載一個包含數百圖標的Fonts，卻只使用其中幾個圖標
在不同的設備瀏覽器字體的渲染會略有差別，在不同的瀏覽器或系統中對文字的渲染不同，其顯示的位置和大小可能會受到font-size、line-height、word-spacing等CSS屬性的影響，而且這種影響調整起來較為困難
為了實現最大程度的瀏覽器支持，可能要提供至少四種不同類型的字體文件。包括.ttf、.woff、.eot和.svg格式字體
不兼容舊的手機瀏覽器：Opera mini，Android 2.1，Windows Phone 7.5-7.8
在手機上可能與系統字體沖突

參考地址：

iconfont應用教程：http://www.iconfont.cn/help/iconuse.html

使用SVG圖標

什麽是SVG？ SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。簡單的說他就是一個可伸縮矢量圖形 (Scalable Vector Graphics)，在瀏覽器中采用繪圖技術。

優勢

SVG圖標是矢量圖形文件，可以隨意修改大小，而且不會影響圖標質量
可以使用CSS樣式來自定義圖標顏色，比如顏色、尺寸等效果
所有SVG圖標可以全部放在一個SVG的文件中（SVG Sprites），節省HTTP的請求
使用SMIL、CSS或者JavaScript可以制作動畫效果
可以使用gzip的方式把文件壓縮到很小
可以很精細的控制SVG圖標的每一部分

劣勢

瀏覽器兼容性較差（IE8-以及Android 2.3默認瀏覽器是不支持SVG的）
需要學習SVG相關知識
需要了解使用制作軟件繪制SVG圖形或專業的SVG圖形編輯軟件

參考網站:

http://www.uisdc.com/svg-icon-part-one

http://www.uisdc.com/svg-icon-part-two

http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/ (SVG向下兼容優雅降級技術)

https://github.com/amfe/article/issues/2

svgicon 庫：

svg-icon:https://leungwensen.github.io/svg-icon/

7.移動端框架和庫

目前市面上移動端開發的框架和庫種類繁多，認為各有優劣，不能說那個最好，只能看那個更適合你！

MUI:http://dev.dcloud.net.cn/mui/ mui 號稱最接近原生APP體驗的高性能前端框架，對頁面加載方面做了大量的優化，性能不錯。

　Clouda UI：http://cloudajs.org/docs 貌似是百度開發的移動端框架，沒用過不做評價。點了下頁面貌似文檔更新不是很及時，不知道還有沒有在維護。

　amazeui ： http://amazeui.org/ 號稱中國首個開源 HTML5 跨屏前端框架，一個新出現沒幾年的框架，公司好像在中關村。之前用了下bug不少，但更新很及時，日漸成熟。很活躍。

zeptio.js ：http://zeptojs.com/ 類庫類似於jQuery

jGestures ：瘋裝手勢事件翻譯網址https:haorooms.com/post/jquery_jGestures

　jquery mobile：http://jquerymobile.com/ 老牌移動端框架。很久之前用過，不是很友好，不知道後來有沒有改進。

太多了。。。列舉不全了，歡迎補充指正！！！

另外開發移動端你也許需要用到如下兩款插件：

swiper 全屏滾動
iscroll 滾動表格

另外有同學在開發移動端的時候使用大量的原生js，覺的jquery體積太大量，怕影響頁面打開速度。貌似很有道理呢！但原生js寫起來很麻煩也很痛苦有木有？還要考慮各種兼容問題，那我沒在移動端用jquery到底可不可以呢？

我覺的可以！如果覺的jqeury 文件太大，可以自己閱讀下源碼，把自己需要的部分留下，不需求的刪除。自己給jquery減肥。

如果你覺的讀源碼太麻煩了。那麽也有辦法。

動手編譯自定義版本的最新 jQuery 類庫：http://www.gbin1.com/technology/jquery/20120921-build-your-own-jquery/

可以自己編譯一個適合你的移動版的小巧的jquery庫！

29.html5 移動端開發總結

手機 kit you 技巧運動 dev 方式 include andro 手機與瀏覽器瀏覽器: 移動端開發主要針對手機，ipad等移動設備，隨著地鐵裏的低頭族越來越多，移動端開發在前端的開發任務中站的比重也越來越大。各種品牌及尺寸的手機也不盡相同。尺寸不同就算了分辨率，

29.html5 移動端開發總結

手機與瀏覽器

1.Viewport(視窗)

2.@media查詢

3. px,em,rem,pt

3、REM ：是CSS3新增的一個相對單位（root em，根em)

5.設備像素比devicePixelRatio

設備像素為:1.0 (-webkit-min-device-pixel-ratio)

設備像素為:1.3 (-webkit-min-device-pixel-ratio)

設備像素為:1.4 (-webkit-min-device-pixel-ratio)

設備像素為:1.5 (-webkit-min-device-pixel-ratio)

設備像素為:2.0 (-webkit-min-device-pixel-ratio)

設備像素為:2.6 (-webkit-min-device-pixel-ratio)

設備像素為:3.0 (-webkit-min-device-pixel-ratio)

優勢

劣勢

使用Sprites 圖標(雪碧圖)

img可以幫助前端工程師往Web頁面中添加需要的圖標，但其不足之處也是眾所周知的。由於img的局限性與不足，2004年3月@Dave Shea提出了一種全新的技術CSS Sprites（在國內常常將這種技術稱為CSS雪碧，又稱CSS精靈）。

Sprites分類

優勢

劣勢

使用字體圖標(IconFont)

劣勢

優勢

劣勢

7.移動端框架和庫

相關推薦

`img`可以幫助前端工程師往Web頁面中添加需要的圖標，但其不足之處也是眾所周知的。由於`img`的局限性與不足，2004年3月@Dave Shea提出了一種全新的技術CSS Sprites（在國內常常將這種技術稱為CSS雪碧，又稱CSS精靈）。