web移動開發總結(一)

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

發布人(rén)：融晨科技

浏覽次數：53

總結今天學習的(de)内容:

移動web的(de)概念和(hé / huò)發展曆史
移動web的(de)開發方式和(hé / huò)區别
響應式原理和(hé / huò)媒體查詢(重點)
響應式框架的(de)介紹
bootstrap框架的(de)基本使用
bootstrap全局CSS樣式布局容器使用(重點)
bootstrap全局CSS樣式栅格系統使用(重點)
bootstrap全局CSS樣式響應式工具使用
微金所項目搭建和(hé / huò)頭部的(de)結構 (重點)

web前端

PC端的(de)web ：在(zài)PC端電腦訪問的(de)web(網頁網站) 頁面一般固定寬度的(de) 居中在(zài)網頁顯示還有各種浏覽器需要(yào / yāo)兼容
移動端的(de)web：在(zài)手機端訪問的(de)web 頁面一般是(shì)全屏的(de) 全屏在(zài)手機裏面顯示在(zài)手機端的(de)浏覽器内核都是(shì)統一webkit 很少考慮浏覽器兼容性問題

移動web的(de)概念和(hé / huò)發展曆史

什麽是(shì)移動web: 就(jiù)是(shì)運行在(zài)手機浏覽器裏面的(de)web應用程序(網頁) 雖然和(hé / huò)網頁是(shì)一樣的(de) ，但是(shì)現代的(de)web特别是(shì)移動web已經不(bù)再是(shì)簡簡單單的(de)網頁了(le／liǎo) 而(ér)是(shì)實現了(le／liǎo)和(hé / huò)APP一樣的(de)功能所以(yǐ)現代的(de)網頁已經可以(yǐ)稱之(zhī)爲(wéi / wèi)應用程序了(le／liǎo)
移動端的(de)浏覽器：
1. 移動端的(de)浏覽器和(hé / huò)PC端有些不(bù)一樣都是(shì)在(zài)手機上(shàng)安裝的(de)浏覽器常見有UC QQ 百度 safari 等
2. 移動端浏覽器都有一個(gè)共同的(de)特點就(jiù)是(shì)都是(shì)webkit内核的(de)浏覽器所以(yǐ)在(zài)浏覽器的(de)兼容性上(shàng)相對PC端比較統一
常見的(de)移動web應用程序：淘寶觸屏版京東手機版蘇甯手機版攜程手機版小米手機版等等這(zhè)些都是(shì)在(zài)手機端浏覽器運行的(de)應用程序
如何區分什麽是(shì)網頁什麽是(shì)應用程序
應用程序是(shì)指運行時(shí)多數爲(wéi / wèi)了(le／liǎo)實現某個(gè)功能，就(jiù)像網站的(de)後台，網站更側重于(yú)前台的(de)美觀展示。
移動web應用程序都有什麽特點
1. 通常移動web應用程序都是(shì)以(yǐ)m開頭的(de)站點例如m.taobao.com m.jd.com
2. 通常移動web應用都是(shì)隻運行在(zài)手機端設計功能也(yě)是(shì)符合手機的(de)操作
3. 頁面都相對比較簡潔使用起來(lái)比較方便
移動web的(de)發展曆史
1. 從2014年HTML5正式定稿後移動web就(jiù)迎來(lái)了(le／liǎo)飛速的(de)發展因爲(wéi / wèi)使用HTML5技術可以(yǐ)更方便更快捷的(de)開發現代web應用程序
2. 而(ér)移動端的(de)手機浏覽器都是(shì)比較新的(de) HTML5在(zài)移動端的(de)浏覽器支持情況都比較好
3. 所以(yǐ)HTML5主要(yào / yāo)應用就(jiù)是(shì)在(zài)移動端移動web
4. 直到(dào)2015 - 2016 - 2017 - 至今移動web已經發展了(le／liǎo)很多年各方面的(de)技術都比較成熟穩定網上(shàng)的(de)教程也(yě)比較完整成熟所以(yǐ)現在(zài)的(de)web已經到(dào)全民移動web的(de)時(shí)代了(le／liǎo)

移動web的(de)開發方式

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

min-width的(de)寫法:

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

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

<!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;
        /*設置盒模型包含邊框*/
        box-sizing: border-box;
    }
    
    .col {
        height: 100px;
        float: left;
        border: 1px solid red;
    }
    
    @media(max-width: 1200px) {
        /*和(hé / huò)CSS一樣寫選擇器和(hé / huò)屬性 和(hé / huò)值*/
        .col {
            width: 33.33%;
        }
    }
    /*如果有多個(gè)條件 可以(yǐ)用 and連接*/
    
    @media (max-width: 992px) {
        /*和(hé / huò)CSS一樣寫選擇器和(hé / huò)屬性 和(hé / huò)值*/
        .col {
            width: 50%;
        }
    }
    /*如果有多個(gè)條件 可以(yǐ)用 and連接*/
    
    @media (max-width: 768px) {
        /*和(hé / huò)CSS一樣寫選擇器和(hé / huò)屬性 和(hé / huò)值*/
        .col {
            width: 100%;
        }
    }
    /*如果有多個(gè)條件 可以(yǐ)用 and連接*/
    
    @media (min-width: 1200px) {
        /*和(hé / huò)CSS一樣寫選擇器和(hé / huò)屬性 和(hé / huò)值*/
        .col {
            width: 25%;
        }
    }
    /* 由于(yú)CSS有層疊性 如果都寫max-width 小于(yú)等于(yú)生效的(de)判斷  小屏幕的(de)判斷 和(hé / huò) 大(dà)屏幕的(de)判斷同時(shí)生效
        希望小屏幕生效
        例如 750寬度   max-width:1200; max-width:992;  max-width:768; 
            大(dà)家都成立希望生效 768最小那個(gè) 需要(yào / yāo)把最小768判斷寫在(zài)最後面把前面2個(gè)覆蓋
     */

    /* 寫媒體查詢條件的(de)時(shí)候 如果 使用max-width 小于(yú)等于(yú)做判斷 
    應該把條件從大(dà)到(dào)小寫 讓小屏幕樣式把大(dà)屏幕樣式覆蓋   向上(shàng)覆蓋*/
    </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>

響應式的(de)開發框架

框架幫你封裝好了(le／liǎo)響應式的(de)功能你隻需要(yào / yāo)使用框架提供的(de)類名既可實現響應式布局
常見的(de)響應式開發框架
1. bootstrap: 目前前端最流行的(de)框架應用非常廣泛移動 PC都可以(yǐ)使用代碼風格很好讓快速構建網頁布局（重點）
2. AmazeUI: 妹子(zǐ)UI 中國(guó)首個(gè)響應式開發框架
3. layUI: 響應式模塊的(de)UI框架
4. MUI ：中國(guó)人(rén)開發的(de)針對移動端的(de)UI 也(yě)有響應式功能（隻适配手機和(hé / huò)ipad）
5. framework7：構造原生APP的(de)框架 UI框架

了(le／liǎo)解bootstrap框架

bootstrap: 引導程序引導你開發程序
1. 2011 推特公司2個(gè)前端開發出(chū)來(lái)的(de)框架後面開源了(le／liǎo)之(zhī)後有很多貢獻者一起參與開發形成了(le／liǎo)一個(gè)大(dà)型UI框架
2. Bootstrap框架：代碼比較優雅結構很規範代碼也(yě)很規範框架生态圈好使用和(hé / huò)開發維護框架的(de)人(rén)很多
3. Bootstrap的(de)好處：讓我們快速開發頁面更方便更快捷

學習bootstrap

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

bootstrap文檔(下面是(shì)要(yào / yāo)熟悉的(de)文檔,很重要(yào / yāo),具體用法在(zài)這(zhè)個(gè)網站:https://v3.bootcss.com/css/)

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

總結

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