29.html5 移動端開發總結

手機與瀏覽器

瀏覽器:

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

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

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

瀏覽器內核：

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

使用IE內核的還包括:

世界窗（The World）

傲遊瀏覽器（Maxthon）

騰訊TT（Tencent Traveler）

帆瀏覽器（Avant Browser）

360安全瀏覽器 （360SE）

搜狗瀏覽器（兼容模式）（Sougou Explorer）

瑞影瀏覽器（Rayying

等等

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

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

四、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

一、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值

不推薦使用。

三、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.

瀏覽器支持狀況：

1. IE以及FireFox壓根不支持。可能接下來的版本會支持。
2. Opera桌面瀏覽器時，即便是視網膜設備，返回的值也是1而不是2. 不過，這個bug在後續的版本中會修復的。
3. Opera Mobile 10不支持，不過Opera Mobile 12正確支持。
4. UC老是顯示1，不過其viewport屬性有些讓人費解。
5. 最新版本的Chrome瀏覽器能正確實現該屬性。Chrome19返回不許確的1, Chrome22能夠正確返回2.
6. MeeGo WebKit (Nokia N9/N950)就嚇人了：當你應用了meta viewport時候（相似<meta name="viewport" content="width=device-width">），值會從1變成1.5!
7. 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端應用常見問題

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

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

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

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

出現以上現象能夠對引用字體圖標的非塊標籤進行如下CSS定義:

display: block;

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

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

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

優勢：

一、自由變化大小

二、自由修改顏色

三、能夠添加一些視覺效果如：陰影、旋轉、透明度。

四、兼容性強

五、減小了HTTP的請求

六、能夠到很CSS很好支持

七、能夠作出跟位圖同樣能夠作的事情

八、自己體積更小

劣勢

• 它們只能被渲染成單色或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/   老牌移動端框架。好久以前用過，不是很友好，不知道後來有沒有改進。

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

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

1. swiper  全屏滾動
2. iscroll 滾動表格

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

我覺的能夠！若是覺的jqeury 文件太大，能夠本身閱讀下源碼，把本身須要的部分留下，不需求的刪除。本身給jquery減肥。

若是你覺的讀源碼太麻煩了。那麼也有辦法。

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

能夠本身編譯一個適合你的移動版的小巧的jquery庫！