移動Web(一)

移動web基礎

移動端開發現狀

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fyWnoeng-1584532810456)(image/phone.jpg)]

• 移動web開發指的是需要適配移動設備的網頁開發

• 移動web開發與pc端web開發沒有本質的區別，使用的還是HTML/CSS/JavaScript的技術

• 移動web開發與pc端web開發的區別是什么？

  ​

移動端的瀏覽器與pc端不同

谷歌瀏覽器 蘋果瀏覽器、 UC瀏覽器 QQ瀏覽器 歐朋瀏覽器 百度手機瀏覽器  360安全瀏覽器  搜狗瀏覽器  獵豹瀏覽器等
國內的手機瀏覽器都是根據webkit內核修改過來的，國內沒有自主研發的內核，國內的操作系統也是基於Android系統修改的。

因此在移動端，css3屬性只需要加webkit前綴即可。

移動端設備尺寸不一樣(尺寸非常多，碎片化很嚴重)

Android： 320*480 480*800  540*960 720*1280 1080*1920 2k屏 4k屏
iphpne：  640*960 640*1136 750*1334 1242*2208

移動端開發分類

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

原生app（native app）

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

優點：

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

缺點：

1. 開發成本高
2. 需要安裝和更新，更新與發布需要審核。

Web App

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

優點：

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

缺點：

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

混合app（Hybrid App）

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

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

優點：

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

缺點：

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

總結：

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xVPqmECz-1584532810457)(image/移動開發分類.png)]

視口viewport（重要）

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


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


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

將視口寬度和手機屏幕一樣寬，網頁基於視口進行布局，網頁的布局寬度就和手機屏幕一致了

什么是視口：移動端一個虛擬布局
有什么用：移動端基於視口進行布局
怎么用：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

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">

屏幕與分辨率

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

屏幕尺寸

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

1英寸 = 2.54厘米

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TEY7Aox8-1584532810458)(image/屏幕尺寸.png)]

屏幕分辨率

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-u1koFIQF-1584532810459)(image/屏幕分辨率.jpg)]

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

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-e4msgFQo-1584532810459)(image/ppi對比.png)]

像素密度ppi(了解)

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

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XKRVoWlQ-1584532810460)(image/像素密度.jpg)]

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

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

物理像素 和 css像素

物理像素

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

css像素

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

像素比

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

獲取設備的像素比

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

2倍圖與3倍圖（重要）

以后同學在工作的過程中，從UI那拿到的設計圖通常都是640的設計圖或者是750的設計圖.

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MJmjDImI-1584532810463)(image/2x.png)]

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

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

【演示：2倍圖】

移動端調試問題

1. 模擬器調試
2. 真機調試：使用手機進行訪問。

手機設備五花八門，屏幕尺寸都大不一樣，尤其是安卓端，給我們的頁面預覽帶來了一些麻煩。在實際工作中，作為開發者不可能有足夠的設備讓我們去測試（除了測試部門 ），即便有，效率也特別的低，因此開發者一般都是通過瀏覽器的手機模擬器來模擬不同的設備。

流式布局

移動端的特點

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

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

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

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

流式布局的特征：

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

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

**

經典的流式布局

//1. 左側固定，右側自適應
//2. 右側固定，左側自適應
//3. 兩側固定，中間自適應（聖杯布局，雙飛翼布局）
//4. 等分布局

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文件，還需要通過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文件，進行編譯。

缺點：

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

使用考拉

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

考拉官網

使用步驟：

1. 把less文件夾拖進去
2. 會在當前目錄生成一個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);
}

嵌套

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

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

.nav {
  border: 1px solid #000;
  overflow: hidden;
  ul{
    position: relative;
    width: 1000px;
    li{
      float: left;
      width: 20%;
      a{
        display: block;
        text-align: center;
        text-decoration: none;
        &:hover{
          color: red;
        };
        img {
          display: block;
          width: 100%;
        }
      }
    }
    }
  }





.nav {
  border: 1px solid #000;
  overflow: hidden;
}
.nav ul {
  position: relative;
  width: 1000px;
}
.nav ul li {
  float: left;
  width: 20%;
}
.nav ul li a {
  display: block;
  text-align: center;
  text-decoration: none;
}
.nav ul li a:hover {
  color: red;
}
.nav ul li a img {
  display: block;
  width: 100%;
}

導入

@charset "UTF-8";

@import "01-variable";

@import "02-maxin";

@import "03-mixin02";

@import "04-book";

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

函數（運算）

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

http://www.1024i.comhtml/demo/less/reference.

JDM

項目結構搭建

樣式初始化

@charset "utf-8";

/* css reset 樣式重置*/
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  margin: 0;
  padding: 0;
  /*所有盒子布局采用內減模式*/
  -webkit-box-sizing: border-box;
  /* 兼容-webkit-內核瀏覽器 */
  box-sizing: border-box;
  /*去除移動端點擊高亮顏色*/
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: 14px;
  color: #333;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  /*后面的都是 備胎*/
}
ol,
ul {
  list-style: none;
}
a,
a:hover {
  text-decoration: none;
  color: #333;
}
input {
  border: none;
  outline: none;
  /* 在 移動端瀏覽器 表單可能會出現 陰影 高亮 3d效果,需要清除*/
  -webkit-appearance: none;
}

/* 廢物利用 */
em, i {
  font-style: normal;
}


/*commom css 公共樣式*/
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
/* 清除浮動 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
  height: 0;
}

京東頭部

京東輪播圖

京東導航

京東快報

京東秒殺

京東主會場