1. 移動端開發分類

原生app（native app）
混合app（Hybrid app）
web應用（webApp）

原生app（native app）

原生app是基於操作系統的開發，比如安卓，ios，windows phone,他們只能在各自的操作系統上運行。

優點：

可以訪問操作系統，獲取更多的資源（gps，攝像頭，傳感器，麥克風等）
速度快，性能高，用戶體驗好
可以離線使用

缺點：

開發成本高
需要安裝和更新，更新與發佈需要審覈。

Web App

Web應用使用H5C3開發頁面，爲瀏覽器設計的基於web的應用，可以在各種智能設備的手機瀏覽器上運行。不需要安裝即可運行。

優點：

支持設備廣泛
開發成本低（使用）
可以隨時上線與更新，無需審覈

缺點：

用戶體驗極度依賴網速
要求聯網

混合app（Hybrid App）

Hybrid App是指介於web-app、native-app這兩者之間的app,它雖然看上去是一個Native App，但只有一個UI WebView，裏面訪問的是一個Web App。（淘寶、京東、手機百度）

Hybird App就是使用了Native app的殼，裏面其實還是HTML5頁面。

優點：

開發成本和難度更低，兼容多個平臺
也可以訪問手機的操作系統資源。
更新維護更方便

缺點：

用戶體驗相比原生app稍差。
性能依賴於網速

總結：

三種開發各有優缺點，具體用什麼需要根據實際情況而定，比如預算，app注重功能還是內容等。

2. 視口viewport（重要）

問題：一個電腦上的網站，在手機端訪問，效果是什麼樣的？

1. 在手機端，html的大小都是980px，爲什麼？
這主要是歷史原因導致的，因爲在移動設備剛流行的時候，網站大多都是pc端的，pc端的頁面寬度一般都比較大，
移動設備的寬度比較小，如果pc端頁面直接在移動端顯示的話，頁面就會錯亂。
爲了解決這個問題，移動端html的大小直接就定死成了980px（因爲早起的pc端網站版心就是980px居多）。

2. 視口
在pc端，html的大小默認是繼承了瀏覽器的寬度，即瀏覽器多寬，html的大小就是多寬，
但是在移動端，多出來了一個視口的概念（喬布斯）,視口說白了就是介於瀏覽器與html之間的一個東西，
視口的寬度默認定死了980px，因此html的寬度默認就是980px，視口的特點是能夠根據設備的寬度進行縮放。

3. 視口設置。
對於現在的移動端頁面來說，視口默認爲980px肯定不合適，因爲設備寬度不夠的話，視口會進行縮放，導致頁面展示效果不好看。

視口參數設置

//width 設置視口的寬度
//width=device-width   設置視口寬度爲設備的寬度（常用）。

//initial-scale 設置初始縮放比例
//initial-scale=1.0  表示不縮放

//user-scalable 設置是否允許用戶縮放
//user-scalable=no  不允許用戶縮放

//maximum-scale  設置允許的最大縮放比例
//maximum-scale=1.0  可以不設置，因爲都禁止用戶縮放了。

//minimum-scale 設置允許最小縮放比
//minimum-scale=1.0  不設置，因爲都禁用用戶縮放了。


//標準寫法：
//快捷鍵：  meta:vp + tab鍵
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

3. 屏幕與分辨率

移動設備與PC設備最大的差異在於屏幕，這主要體現在屏幕尺寸和屏幕分辨率兩個方面。

屏幕尺寸

通常我們所指的屏幕尺寸，實際上指的是屏幕對角線的長度（一般用英寸來度量）如下圖所示

1英寸 = 2.54釐米

屏幕分辨率

分辨率則一般用像素來度量，表示屏幕水平和垂直方向的像素數，例如1920*1080指的是屏幕垂直方向和水平方向分別有1920和1080個像素點而構成，如下圖所示,相同尺寸下分辨率越高，越清晰。

像素：指計算機顯示設備中的最小單位，即一個像素點的大小。

像素是相對長度單位，在屏幕分辨率越高的設備，像素點越小，屏幕分辨率越低，像素點越大。

像素密度ppi(瞭解)

PPI（Pixels Per Inch）值來表示屏幕每英寸的像素數

利用 勾股定理 我們可以計算得出PPI

PPI值的越大說明單位尺寸裏所能容納的像素數量就越多，所能展現畫面的品質也就越精細，反之就越粗糙。

結論：當PPI 越大，展示的畫質越精細。

物理像素和 css像素

物理像素

設備像素，在同一個設備上，它的物理像素是固定的，這是廠商在出廠時就設置好了的，即一個設備的分辨率是固定的。

css像素

邏輯像素，viewport中的一個小方格，CSS樣式代碼中使用的是邏輯像素。如果在一個設備中，物理像素與邏輯像素相等，將不會產生任何問題。但是，在iphone 4中，物理像素是640px960px，而邏輯像素數爲320X480px。因此，需要使用大約4個物理像素來顯示一個CSS像素。

像素比

物理像素與邏輯像素之間的比例。當像素比爲1:1時，使用1個物理像素顯示1個邏輯像素；當像素比爲2:1時，使用4個物理像素顯示1個邏輯像素。

獲取設備的像素比

window.devicePixelRatio  //物理像素與CSS像素的比值

4. 2倍圖與3倍圖（重要）

把更多的像素點壓縮至一塊屏幕裏，從而達到更高的分辨率並提高屏幕顯示的細膩程度。

設備像素比devicePixelRatio：即像素的壓縮比例。

結論：在移動端爲了在高清屏手機上顯示得更加細膩，通常會使用更大的圖片，比如2倍圖或者3倍圖。

5. 流式佈局

移動端的特點

手機端的兼容性問題比PC端小很多，因爲手機端的瀏覽器版本比較新
手機端屏幕比較小，能夠放的內容比較少。

問題：佈局的時候怎麼解決屏幕大小不一致的問題？

PC端，固定版心，讓所有分辨率的電腦的版心都是一樣的，比如京東
移動端：移動端無法設置版心，因爲移動端的設備屏幕本身就小，設置版心不合適。因此移動端大多會採用流式佈局（百分比佈局）

流式佈局，也叫百分比佈局，是移動端開發中經常使用的佈局方式之一。

流式佈局的特徵：

寬度自適應，高度寫死，並不是百分百還原設計圖
圖標都是固定死大小的，包括字體等也是固定死的。並不是所有的東西都是自適應的。
一些大的圖片，設置寬度爲百分比自適應即可，隨着屏幕大小進行變化

流式佈局無法做到所有設備都非常逼真的還原設計圖，有些設備顯示效果不是特別的好看。但是流式佈局是移動端非常常用的一種佈局方式，比較簡單，需要掌握（攜程、京東)

經典的流式佈局：

//1. 左側固定，右側自適應
//2. 右側固定，左側自適應
//3. 兩側固定，中間自適應（聖盃佈局，雙飛翼佈局）
     中間盒子： width:100%
     父盒子： 設置padding值
     左右盒子：定位 
//4. 等分佈局

6. less

Less簡介

CSS 需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利於複用。成這些困難的很大原因源於 CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。LESS/sass 爲 Web 開發者帶來了福音，它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，並且降低了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可以讓我們用更少的代碼做更多的事情。

(less css預處理器)

本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 CSS 文件。LESS 並沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，爲 CSS 加入程序式語言的特性。

less僅僅是寫css的另一種方式，寫出來的less文件瀏覽器也不識別，還需要通過less解析器解析成css，最終瀏覽器引入的還是css文件。

學習網站：中文網: http://lesscss.cn/

less的編譯

如何把less文件變成css文件

引入less.js文件（瞭解）

<!-- 必須指定rel的類型是stylesheet/less --> 
<link rel="stylesheet/less" href="less/01.less">
<script src="less.js"></script>

注意：這種方式必須在http協議下運行，因爲本質上less.js是通過ajax請求了less文件，進行編譯。

缺點：

需要多引入一個less.js文件
需要多一次http請求，file協議打開無效
如果瀏覽器禁用了js，那麼無法生效
無法實時的看到編譯的結果。

使用考拉(http://koala-app.com/index-zh.html )

koala是一個前端預處理器語言（less/sass）圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。

使用步驟：

把less文件夾拖進去
會在當前目錄生成一個css目錄

優點：不用node環境，不用less環境，koala內置了。

Less語法

less初體驗

新建一個less文件，輸入以下代碼:

@color:red;
p {
  color:@color;
}

可以看到，webstorm自動的幫我們生成了對應的css文件。

變量

註釋

/*這個註釋是CSS中的註釋，因此會編譯到css中*/
//這個註釋,CSS中用不了，因此不會編譯出來。

變量

@charset "UTF-8";
@wjs_color:#e92322;
body {
  background-color: @wjs_color;
}

div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}

mixin混入

混入樣式類

@charset "UTF-8";
//混入
.btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
}

.btn_border {
  border: 1px solid #ccc;
}

.btn_danger {
  background-color: red;
}

.btn_block {
  display: block;
  width: 100%;
}

//混入其他類的樣式。
.my_btn {
  .btn();
  .btn_block();
  .btn_border();
  .btn_danger();
}

編譯後的css

@charset "UTF-8";
.btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
}
.btn_border {
  border: 1px solid #ccc;
}
.btn_danger {
  background-color: red;
}
.btn_block {
  display: block;
  width: 100%;
}
.my_btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  background-color: red;
}

缺點：寫了很多類，但是都編譯到css文件中了，其實我們需要的僅僅是.my_btn這一個類。

混入函數

不帶參數的函數

@charset "UTF-8";

//不會被編譯
.btn() {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.my_btn {
  .btn();
}

帶參數的函數

.btn_border(@width) {
  border: @width solid #000;
}
.my_btn {
  //如果函數定義了參數，調用的時候必須傳入參數，否則會報錯
  .btn_border();
  //傳入參數，就不會報錯
  .btn_border(10px);
}

帶默認值的函數

.btn_border(@width:1px) {
  border: @width solid #000;
}
.my_btn {
  //因爲有默認值，所以不會報錯
  .btn_border();
  //傳入參數，會覆蓋1px，也不會報錯
  .btn_border(10px);
}

嵌套

我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，並且代碼看起來更加的清晰。

使用僞類的時候可以使用& 表示自己

@charset "UTF-8";
.wjs_header {
  border-bottom: 1px solid #ccc;
}
.wjs_header .header_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #ccc;
}
.wjs_header .header_item:first-child {
  border-left: none;
}

導入

@charset "UTF-8";

@import "01-variable";

@import "02-maxin";

@import "03-mixin02";

@import "04-book";

模塊化的思想，分模塊進行管理這些less文件，最終只需要使用import將less引入到一起即可。

函數（運算）(http://www.1024i.com/demo/less/reference.html)

在我們的 CSS 中充斥着大量的數值型的 value，less可以直接支持運算，也提供了一系列的函數提供給我們使用。

移動端開發知識點1

1. 移動端開發分類

2. 視口viewport（重要）

3. 屏幕與分辨率

屏幕尺寸

屏幕分辨率

像素密度ppi(瞭解)

物理像素和 css像素

4. 2倍圖與3倍圖（重要）

5. 流式佈局

6. less

Less簡介

less的編譯

引入less.js文件（瞭解）

使用考拉(http://koala-app.com/index-zh.html )

Less語法

less初體驗

變量

mixin混入

嵌套

導入

函數（運算）(http://www.1024i.com/demo/less/reference.html)

AJAX——模板引擎

AJAX——同源與跨域1

招銀網絡科技前端一面

拼多多、vipkid編程題

HTTP狀態碼之200和304

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

移動端開發知識點1

1. 移動端開發分類

2. 視口viewport（重要）

3. 屏幕與分辨率

屏幕尺寸

屏幕分辨率

像素密度ppi(瞭解)

物理像素 和 css像素

4. 2倍圖與3倍圖（重要）

5. 流式佈局

6. less

Less簡介

less的編譯

引入less.js文件（瞭解）

使用考拉(http://koala-app.com/index-zh.html )

Less語法

less初體驗

變量

mixin混入

嵌套

導入

函數（運算）(http://www.1024i.com/demo/less/reference.html)

物理像素和 css像素