移動web基礎

移動端開發現狀

• 移動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,他們只能在各自的操作系統上運行。

優點：

可以訪問操作系統，獲取更多的資源（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注重功能還是內容等。

?

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

?

屏幕與分辨率

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

屏幕尺寸

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

1英寸 = 2.54厘米

屏幕分辨率

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

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

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

像素密度ppi(了解)

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

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

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的設計圖.

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

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

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

移動端調試問題

模擬器調試

真機調試：使用手機進行訪問。

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

流式布局

移動端的特點

• 手機端的兼容性問題比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文件，進行編譯。

缺點：

需要多引入一個less.js文件

需要多一次http請求，file協議打開無效

如果瀏覽器禁用了js，那么無法生效

無法實時的看到編譯的結果。

使用考拉

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引入到一起即可。

函數（運算）

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

http://www.1024i.com/demo/less/reference.html

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;}

京東頭部

?

京東輪播圖

?

京東導航

?

京東快報

?

京東秒殺

?

京東主會場

?

總結

以上是生活随笔為你收集整理的电商移动Web实战项目（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。