电商移动Web实战项目(1)
移動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"; @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)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Delphi with Lua5.1.3
- 下一篇: PCA(主成分分析法)的理解笔记及算法的