web移動(dòng)開(kāi)發(fā)總結(jié)(一)

發(fā)表時(shí)間：2018-12-2

發(fā)布人：葵宇科技

瀏覽次數(shù)：53

總結(jié)今天學(xué)習(xí)的內(nèi)容:

移動(dòng)web的概念和發(fā)展歷史
移動(dòng)web的開(kāi)發(fā)方式和區(qū)別
響應(yīng)式原理和媒體查詢(xún)(重點(diǎn))
響應(yīng)式框架的介紹
bootstrap框架的基本使用
bootstrap全局CSS樣式布局容器使用(重點(diǎn))
bootstrap全局CSS樣式柵格系統(tǒng)使用(重點(diǎn))
bootstrap全局CSS樣式響應(yīng)式工具使用
微金所項(xiàng)目搭建和頭部的結(jié)構(gòu) (重點(diǎn))

web前端

PC端的web ：在PC端電腦訪問(wèn)的web(網(wǎng)頁(yè)網(wǎng)站) 頁(yè)面一般固定寬度的居中在網(wǎng)頁(yè)顯示還有各種瀏覽器需要兼容
移動(dòng)端的web：在手機(jī)端訪問(wèn)的web 頁(yè)面一般是全屏的全屏在手機(jī)里面顯示在手機(jī)端的瀏覽器內(nèi)核都是統(tǒng)一webkit 很少考慮瀏覽器兼容性問(wèn)題

移動(dòng)web的概念和發(fā)展歷史

什么是移動(dòng)web: 就是運(yùn)行在手機(jī)瀏覽器里面的web應(yīng)用程序(網(wǎng)頁(yè)) 雖然和網(wǎng)頁(yè)是一樣的，但是現(xiàn)代的web特別是移動(dòng)web已經(jīng)不再是簡(jiǎn)簡(jiǎn)單單的網(wǎng)頁(yè)了而是實(shí)現(xiàn)了和APP一樣的功能所以現(xiàn)代的網(wǎng)頁(yè)已經(jīng)可以稱(chēng)之為應(yīng)用程序了
移動(dòng)端的瀏覽器：
1. 移動(dòng)端的瀏覽器和PC端有些不一樣都是在手機(jī)上安裝的瀏覽器常見(jiàn)有UC QQ 百度 safari 等
2. 移動(dòng)端瀏覽器都有一個(gè)共同的特點(diǎn) 就是都是webkit內(nèi)核的瀏覽器所以在瀏覽器的兼容性上相對(duì)PC端比較統(tǒng)一
常見(jiàn)的移動(dòng)web應(yīng)用程序：淘寶觸屏版京東手機(jī)版蘇寧手機(jī)版攜程手機(jī)版小米手機(jī)版等等這些都是在手機(jī)端瀏覽器運(yùn)行的應(yīng)用程序
如何區(qū)分什么是網(wǎng)頁(yè)什么是應(yīng)用程序
應(yīng)用程序是指運(yùn)行時(shí)多數(shù)為了實(shí)現(xiàn)某個(gè)功能，就像網(wǎng)站的后臺(tái)，網(wǎng)站更側(cè)重于前臺(tái)的美觀展示。
移動(dòng)web應(yīng)用程序都有什么特點(diǎn)
1. 通常移動(dòng)web應(yīng)用程序都是以m開(kāi)頭的站點(diǎn) 例如m.taobao.com m.jd.com
2. 通常移動(dòng)web應(yīng)用都是只運(yùn)行在手機(jī)端設(shè)計(jì)功能也是符合手機(jī)的操作
3. 頁(yè)面都相對(duì)比較簡(jiǎn)潔使用起來(lái)比較方便
移動(dòng)web的發(fā)展歷史
1. 從2014年HTML5正式定稿后移動(dòng)web就迎來(lái)了飛速的發(fā)展因?yàn)槭褂肏TML5技術(shù)可以更方便更快捷的開(kāi)發(fā)現(xiàn)代web應(yīng)用程序
2. 而移動(dòng)端的手機(jī)瀏覽器都是比較新的 HTML5在移動(dòng)端的瀏覽器支持情況都比較好
3. 所以HTML5主要應(yīng)用就是在移動(dòng)端移動(dòng)web
4. 直到2015 - 2016 - 2017 - 至今移動(dòng)web已經(jīng)發(fā)展了很多年各方面的技術(shù)都比較成熟穩(wěn)定網(wǎng)上的教程也比較完整成熟所以現(xiàn)在的web已經(jīng)到全民移動(dòng)web的時(shí)代了

移動(dòng)web的開(kāi)發(fā)方式

如何去開(kāi)發(fā)移動(dòng)web 了解常見(jiàn)的移動(dòng)web的開(kāi)發(fā)方式
1. 響應(yīng)式開(kāi)發(fā)方式：開(kāi)發(fā)一個(gè)頁(yè)面同時(shí)運(yùn)行在PC端和移動(dòng)端針對(duì)不同的屏幕大小來(lái)自動(dòng)適應(yīng)屏幕展示對(duì)應(yīng)端的頁(yè)面的布局
2. 原生的移動(dòng)web開(kāi)發(fā)方式：針對(duì)每一個(gè)端 PC端和移動(dòng)端都分別開(kāi)發(fā)1個(gè)頁(yè)面 PC端加載PC端的頁(yè)面移動(dòng)端加載移動(dòng)端的頁(yè)面
3. 兩種方式的對(duì)比和應(yīng)用場(chǎng)景
  1. 響應(yīng)式開(kāi)發(fā)：一個(gè)頁(yè)面適配多個(gè)終端開(kāi)發(fā)效率高維護(hù)效率高但是由于代碼都在一個(gè)頁(yè)面會(huì)造成冗余所以運(yùn)行的效率低
    應(yīng)用在一些新建的網(wǎng)站同時(shí)把2個(gè)端都做完快速上線對(duì)頁(yè)面加載性能要求不高使用響應(yīng)式新聞網(wǎng)站官網(wǎng) 活動(dòng)頁(yè)面等
  2. 原生移動(dòng)web開(kāi)發(fā)：要針對(duì)每個(gè)端都寫(xiě)1個(gè)頁(yè)面開(kāi)發(fā)維護(hù)效率低但是由于針對(duì)性強(qiáng) 只有對(duì)應(yīng)端需要的代碼代碼冗余少運(yùn)行效率高
    應(yīng)用在一些老網(wǎng)站 PC已經(jīng)上線單獨(dú)開(kāi)發(fā)移動(dòng)端寫(xiě)2套代碼對(duì)頁(yè)面加載性能要求高使用原生電商直播視頻聊天等
學(xué)習(xí)響應(yīng)式開(kāi)發(fā)方式
1. 理解響應(yīng)式開(kāi)發(fā)的原理
  1. 獲取屏幕的寬度去判斷當(dāng)前是屬于什么屏幕
  2. 屏幕通常有4種
    1. 大屏幕屏幕寬度大于1200
    2. 中屏幕屏幕寬度大于992 小于等于1200
    3. 小屏幕屏幕寬度大于768 小于等于992
    4. 超小屏幕屏幕寬度小于等于768
  3. 根據(jù)不同的屏幕來(lái)改變頁(yè)面的布局方式
2. 如何判斷和改變布局方式
  1. 使用JS判斷和設(shè)置行內(nèi)樣式的方式
  2. 使用CSS3新增的屬性媒體查詢(xún)來(lái)判斷屏幕寬度然后在媒體查詢(xún)里面寫(xiě)需要改變的樣式
3. 媒體查詢(xún)的語(yǔ)法
  @media(條件){
  //條件成立執(zhí)行的代碼
  }
  條件通常有3種寫(xiě)法
  width:1200px; 表示屏幕寬度等于1200 條件成立
  min-width:1200px; 表示屏幕寬度大于等于1200 條件成立
  max-width:1200px 表示屏幕寬度小于等于1200 條成立
  如果有多個(gè)條件可以使用 and相連
  @media(條件) and (條件2){
  //條件成立執(zhí)行的代碼
  }
  條件成立執(zhí)行的代碼就是普通的CSS 代碼里面寫(xiě)選擇{屬性:值} 的方式當(dāng)條件成立就會(huì)執(zhí)行這個(gè)CSS樣式
4. 媒體查詢(xún)條件的判斷順序
  1. 如果使用min-width作為條件判斷的時(shí)候由于是大于等于的判斷
    假設(shè)屏幕1400 同時(shí)寫(xiě)了3個(gè)條件 min-widht:768px min-width:992px min-width:1200px
    那么1400 大于 1200也大于992 也大于768 就意味著3個(gè)條件都能成立但是一般我們會(huì)取最大的屏幕的樣式也就是1200 的所以寫(xiě)判斷的時(shí)候要從小到大的方式寫(xiě) 讓大屏幕生效的樣式把小屏幕的樣式覆蓋（向下覆蓋）

min-width的寫(xiě)法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0px;
        padding: 0px;
        /*設(shè)置盒模型包含邊框*/
        box-sizing: border-box;
    }
    
    .col {
        height: 100px;
        float: left;
        border: 1px solid red;
    }
     /*如果有多個(gè)條件 可以用 and連接*/
    
    @media (min-width: 768px){
        /*和CSS一樣寫(xiě)選擇器和屬性 和值*/
        .col {
            width: 50%;
        }
    }
    /*如果有多個(gè)條件 可以用 and連接*/
    
    @media (min-width: 992px) {
        /*和CSS一樣寫(xiě)選擇器和屬性 和值*/
        .col {
            width: 33.33%;
        }
    }
    @media(min-width: 1200px) {
        /*和CSS一樣寫(xiě)選擇器和屬性 和值*/
        .col {
            width: 25%;
        }
    }
    
   
    /*如果有多個(gè)條件 可以用 and連接*/
    
    @media (max-width: 768px) {
        /*和CSS一樣寫(xiě)選擇器和屬性 和值*/
        .col {
            width: 100%;
        }
    }
    /* 由于CSS有層疊性 如果都寫(xiě)min-width 大于等于生效的判斷  小屏幕的判斷 和 大屏幕的判斷同時(shí)生效
        比如屏幕寬度1400  肯定大于1200  肯定大于 992  和 768  3個(gè)條件都滿足 但是由于CSS層疊性
        1200 最上面 992 第二 768 第三   768把前面的樣式都覆蓋
        希望 1200 把 992  和 768  覆蓋 */
    /* 寫(xiě)媒體查詢(xún)條件的時(shí)候 如果 使用min-width 大于等于做判斷 
    應(yīng)該把條件從小到大寫(xiě) 讓大屏幕樣式把小屏幕樣式覆蓋  向下覆蓋*/
    </style>
</head>

<body>
    <div class="row">
        <div class="col">div1</div>
        <div class="col">div2</div>
        <div class="col">div3</div>
        <div class="col">div4</div>
    </div>
</body>

</html>

max-width的寫(xiě)法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
    * {
        margin: 0px;
        padding: 0px;
        /*設(shè)置盒模型包含邊框*/
        box-sizing: border-box;
    }
    
    .col {
        height: 100px;
        float: left;
        border: 1px solid red;
    }
    
    @media(max-width: 1200px) {
        /*和CSS一樣寫(xiě)選擇器和屬性 和值*/
        .col {
            width: 33.33%;
        }
    }
    /*如果有多個(gè)條件 可以用 and連接*/
    
    @media (max-width: 992px) {
        /*和CSS一樣寫(xiě)選擇器和屬性 和值*/
        .col {
            width: 50%;
        }
    }
    /*如果有多個(gè)條件 可以用 and連接*/
    
    @media (max-width: 768px) {
        /*和CSS一樣寫(xiě)選擇器和屬性 和值*/
        .col {
            width: 100%;
        }
    }
    /*如果有多個(gè)條件 可以用 and連接*/
    
    @media (min-width: 1200px) {
        /*和CSS一樣寫(xiě)選擇器和屬性 和值*/
        .col {
            width: 25%;
        }
    }
    /* 由于CSS有層疊性 如果都寫(xiě)max-width 小于等于生效的判斷  小屏幕的判斷 和 大屏幕的判斷同時(shí)生效
        希望小屏幕生效
        例如 750寬度   max-width:1200; max-width:992;  max-width:768; 
            大家都成立希望生效 768最小那個(gè) 需要把最小768判斷寫(xiě)在最后面把前面2個(gè)覆蓋
     */

    /* 寫(xiě)媒體查詢(xún)條件的時(shí)候 如果 使用max-width 小于等于做判斷 
    應(yīng)該把條件從大到小寫(xiě) 讓小屏幕樣式把大屏幕樣式覆蓋   向上覆蓋*/
    </style>
</head>

<body>
    <div class="row">
        <div class="col">div1</div>
        <div class="col">div2</div>
        <div class="col">div3</div>
        <div class="col">div4</div>
    </div>
</body>

</html>

響應(yīng)式的開(kāi)發(fā)框架

框架幫你封裝好了響應(yīng)式的功能你只需要使用框架提供的類(lèi)名既可實(shí)現(xiàn)響應(yīng)式布局
常見(jiàn)的響應(yīng)式開(kāi)發(fā)框架
1. bootstrap: 目前前端最流行的框架應(yīng)用非常廣泛移動(dòng) PC都可以使用代碼風(fēng)格很好讓快速構(gòu)建網(wǎng)頁(yè)布局（重點(diǎn)）
2. AmazeUI: 妹子UI 中國(guó)首個(gè)響應(yīng)式開(kāi)發(fā)框架
3. layUI: 響應(yīng)式模塊的UI框架
4. MUI ：中國(guó)人開(kāi)發(fā)的針對(duì)移動(dòng)端的UI 也有響應(yīng)式功能（只適配手機(jī)和ipad）
5. framework7：構(gòu)造原生APP的框架 UI框架

了解bootstrap框架

bootstrap: 引導(dǎo)程序引導(dǎo)你開(kāi)發(fā)程序
1. 2011 推特公司2個(gè)前端開(kāi)發(fā)出來(lái)的框架后面開(kāi)源了之后有很多貢獻(xiàn)者一起參與開(kāi)發(fā)形成了一個(gè)大型UI框架
2. Bootstrap框架：代碼比較優(yōu)雅結(jié)構(gòu)很規(guī)范代碼也很規(guī)范框架生態(tài)圈好使用和開(kāi)發(fā)維護(hù)框架的人很多
3. Bootstrap的好處：讓我們快速開(kāi)發(fā)頁(yè)面更方便更快捷

學(xué)習(xí)bootstrap

打開(kāi)官網(wǎng) https://v3.bootcss.com/
下載bootstrap （推薦下載生產(chǎn)環(huán)境的bootstrap）
bootstrap-3.3.7-dist
如果下載整個(gè)源碼需要解壓使用里面的dist目錄里面的代碼
引入bootstrap
1. 引入bootstrap.css 樣式
2. 引入jquery.js js 因?yàn)閎ootstrap基于jquery 需要先引入jquery
3. 引入bootstrap.js JS插件的js文件
引包規(guī)范
1. 如果依賴(lài)的先引入依賴(lài)的包在引入不依賴(lài)的包
2. 有第三方的包先引入第三方的包再引入自己包
3. CSS 文件通常引入在head中
4. JS 文件通常引入在body的結(jié)束標(biāo)簽的上面（好處就是為了讓頁(yè)面迅速加載出來(lái)）
  除了一些對(duì)頁(yè)面渲染有幫助的JS必須放在前面

bootstrap文檔(下面是要熟悉的文檔,很重要,具體用法在這個(gè)網(wǎng)站:https://v3.bootcss.com/css/)

全局CSS樣式（一些簡(jiǎn)單的類(lèi)名只要寫(xiě)類(lèi)名就可以生效對(duì)應(yīng)的樣式）
1. 布局容器
  1. container 固定寬度且居中的版心容器跟隨頁(yè)面的變化也會(huì)響應(yīng)式變化寬度
  2. container-fluid 全屏容器
2. 柵格系統(tǒng) 百分比布局的一個(gè)柵格系統(tǒng)
  1. 分為行和列類(lèi)似表格tr 和 td
  2. 列一行最多分為12列
  3. 列有4個(gè)類(lèi)名分別對(duì)應(yīng)4個(gè)屏幕生效列的類(lèi)名
    col-lg-x 大屏幕列的類(lèi)名 large
    col-md-x 中屏幕的列的類(lèi)名 middle
    col-sm-x 小屏幕的列的類(lèi)名 small
    col-xs-x 超小屏幕的列的類(lèi)名 extra small
  4. 行必須包含在容器里面因?yàn)閏ontainer有內(nèi)邊距padding row為了和container的padding抵消就添加了margin-left的負(fù)值去抵消所以row需要包含在container容器里面
3. 排版
  文字對(duì)齊
4. 表格
  帶邊框帶條紋等
5. 表單
  水平排列表單等
6. 按鈕
  各種顏色尺寸按鈕
7. 輔助類(lèi)
  文本顏色浮動(dòng) 清除浮動(dòng) 顯示隱藏
8. 響應(yīng)式工具
  控制元素在某個(gè)屏幕隱藏顯示
組件（靜態(tài)的組件一些標(biāo)簽組合在一起形成的一個(gè)功能）
1. 字體圖標(biāo)
2. 下拉菜單
3. 按鈕組
4. 導(dǎo)航導(dǎo)航條
5. 分頁(yè)
6. 警告框
7. 媒體對(duì)象
8. 列表組
9. 面板
javascript插件（動(dòng)態(tài)的組件一些標(biāo)簽組件在一起并且有js交互和功能）
1. 模態(tài)框
2. 下拉菜單插件(有交互的)
3. 標(biāo)簽頁(yè) (tab欄)
4. 工具提示
5. 警告框彈出框
6. Collapse 折疊菜單手風(fēng)琴菜單
7. Carousel 輪播圖旋轉(zhuǎn)木馬
8. Affix 吸頂效果

總結(jié)

移動(dòng)web：移動(dòng)端(手機(jī)端)打開(kāi)網(wǎng)頁(yè)網(wǎng)站
移動(dòng)web 已經(jīng)不僅僅實(shí)現(xiàn)內(nèi)容顯示而更多偏向應(yīng)用能夠提升上網(wǎng)體驗(yàn) 生活體驗(yàn) 稱(chēng)之為應(yīng)用程序了
移動(dòng)web: 包含了網(wǎng)頁(yè)(暫時(shí)只學(xué)習(xí)網(wǎng)頁(yè)網(wǎng)站) APP 微信小程序公眾號(hào) 內(nèi)嵌頁(yè)面
移動(dòng)端瀏覽器：都是webkit內(nèi)核兼容性少
移動(dòng)web的開(kāi)發(fā)方式
1. 響應(yīng)式方式(一般使用框架)：一個(gè)頁(yè)面同時(shí)適配多個(gè)終端根據(jù)屏幕變化而自動(dòng)適應(yīng)變化
  應(yīng)用：新建的網(wǎng)站或者對(duì)性能要求不是很高官網(wǎng) 論壇播客
2. 原生方式：針對(duì)每個(gè)端都寫(xiě)一個(gè)頁(yè)面寫(xiě)死的
  應(yīng)用：老網(wǎng)站或者對(duì)性能要求很高的電商直播視頻
響應(yīng)式開(kāi)發(fā)原理
1. 使用JS判斷屏幕寬度修改樣式
2. 使用媒體查詢(xún) 判斷設(shè)置樣式
3. 4種屏幕需要判斷
  1. 大屏幕lg w >= 1200
  2. 中屏幕md w >= 992 w < 1200
  3. 小屏幕sm w >= 768 w < 992
  4. 超小屏幕xs w < 768
4. 媒體查詢(xún)的語(yǔ)法
  @media(條件){
  //條件成立執(zhí)行的代碼
  }
  條件通常有3種寫(xiě)法
  width:1200px; 寬度等于這個(gè)值
  min-width:1200px; 寬度大于等于這個(gè)值條件從小到大寫(xiě) 讓大的把小的覆蓋
  max-width:1200px; 寬度小于等于這個(gè)值條件從大到小寫(xiě) 讓小的把大的覆蓋
響應(yīng)式開(kāi)發(fā)框架：為了讓響應(yīng)式開(kāi)發(fā)更簡(jiǎn)單快捷
1. bootstrap (重點(diǎn)掌握所有UI框架基礎(chǔ))
2. 妹子UI
3. layUI
4. MUI
5. framework7
使用bootstrap
1. 下載包
2. 引包
  1. 引入bootstrap.css
  1. 引入jquery.js （bootstrap JS插件基于jquery）
  1. 引入bootstrap.js
3. 使用文檔里面的代碼就有對(duì)應(yīng)的效果
bootstrap文檔
1. 全局CSS樣式：簡(jiǎn)單的類(lèi)名加了就有效果跟標(biāo)簽無(wú)關(guān)
2. 組件：組合多個(gè)標(biāo)簽類(lèi)名在一起形成的靜態(tài)效果就是組件
3. JS插件 : 在靜態(tài)組件的基礎(chǔ)上添加了交互能夠點(diǎn)擊能夠動(dòng)等就是插件
布局容器
1. container 居中
2. container-fluid 全屏
3. 2個(gè)容器都有padding 要讓內(nèi)容往里面靠左右15px
柵格系統(tǒng)
1. 通過(guò)行和列組成的布局一個(gè)系統(tǒng)
2. 行row 列 col 類(lèi)似表格的tr td
3. 一行最多分為12列
4. 行必須放到container 容器里面或者 col里面要和父容器padding抵消
5. 列需要放到行里面
6. 內(nèi)容放到列里面
7. 4個(gè)柵格類(lèi)名 col-lg col-md col-sm col-xs 分別會(huì)在對(duì)應(yīng)的屏幕生效
8. 列12 自由劃分也可以等比例劃分等比例只能被12整除的 1 2 3 4 6 12
9. 柵格系統(tǒng)還可以嵌套嵌套的子row 參照父元素
常用的樣式組件插件
搭建微金所項(xiàng)目
1. 創(chuàng)建項(xiàng)目文件夾把css fonts img lib復(fù)制到項(xiàng)目文件夾(來(lái)源完整版) lib 就是第三方的包
2. 創(chuàng)建主頁(yè) 引包
3. 寫(xiě)結(jié)構(gòu) 把頁(yè)面分區(qū)域頭部導(dǎo)航輪播圖特色預(yù)約商品新聞合作伙伴
4. 推薦容器使用id 方便覆蓋樣式和方便JS獲取元素
5. 使用bootstrap構(gòu)建頁(yè)面的內(nèi)容
  1. 頭部：全局樣式里面的：容器柵格系統(tǒng) 組件：字體圖標(biāo)
  2. 導(dǎo)航：組件：導(dǎo)航條
  3. 輪播圖： JS插件：carousel輪播圖插件
  4. 特色介紹：全局樣式：容器柵格系統(tǒng) 組件：字體圖標(biāo) 媒體對(duì)象