摘要：目錄移動介紹和兩種開發方式響應式開發方式原生的開發方式響應式的原理的媒體查詢響應式開發框架的介紹和基本信息優勢版本了解框架和庫的區別主導者不一樣入門起步下載和引包閱讀的文檔了解常用的全局樣式和組件和插件搭建項目目錄結構創建主頁引包設置網

移動web介紹和兩種開發方式(響應式開發方式 原生的開發方式)

響應式的原理(CSS3的媒體查詢)

響應式開發框架(Bootstrap) 的介紹和基本信息-優勢-版本

了解框架和庫的區別 主導者不一樣

入門Bootstrap 起步 下載和引包

閱讀Bootstrap的文檔 了解常用的全局CSS樣式 和 組件 和JS插件

搭建項目目錄結構

創建主頁引包 設置網頁字體和空結構

字體圖標的生成 和使用

總結

移動web ： 移動端手機瀏覽器或者微信里面瀏覽的網頁

移動APP ： 手機上需要下載安裝的應用程序

響應式開發用在一些新建的網站(PC和移動同時出來) 對加載速度要求不是很高

純原生移動web開發 一般會用在一些已經有PC端上線的網站 再次開發移動端 移動端需要加載速度很快的網站

超小屏幕（手機）    768px以下
小屏設備（平板）    768px-992px
中等屏幕（舊式電腦）   992px-1200px
大屏設備（現代電腦）   1200px以上

    @media screen and (條件){
        //滿足條件執行CSS代碼
    }

    and的前后必須有空格  條件通常只有兩個 min-width max-width

    @media (條件){
        //滿足條件執行CSS代碼
    }

    可以簡寫省略 screen and

min-width 屏幕寬度大于等于某個值生效 (最小寬度)
max-width 屏幕寬度小于等于某個值的時候生效 (最大寬度)

  width > 1200  大屏幕 大屏PC設備
  992 < width < 1200  中屏幕 老式電腦
  768 < width < 992  小屏幕 平板設備
  width < 768 超小屏幕 手機

1.如果使用min-width條件判斷的時候 條件判斷大小 要從小到大寫

  /*min-width: 768px 當屏幕的寬度大于等于768時 背景顏色為green */
  @media screen and (min-width: 768px){
      body{
          background-color: green;
      }
  }

  /*min-width: 992px 當屏幕的寬度大于等于992時 背景顏色為blue*/
  @media screen and (min-width: 992px){
      body{
          background-color: blue;
      }
  }

  /*min-width: 1200px 當寬度大于等于1200時 背景顏色為pink*/
  @media screen and (min-width: 1200px){
      body{
          background-color: pink;
      }
  }
  

2.如果使用max-width條件判斷到時候 條件判斷大小 要從大到小寫

  /*max-width: 1200px:寬度在1200以下*/
  @media screen and (max-width: 1200px) {
      body {
          background-color: green;
      }
  }

  /*max-width: 992px:寬度在992以下*/
  @media screen and (max-width: 992px) {
      body {
          background-color: blue;
      }
  }

  /*max-width: 768px:寬度在768以下*/
  @media screen and (max-width: 768px) {
      body {
          background-color: pink;
      }
  }

向上兼容 只寫了小的判斷, 大的判斷沒有寫, 但是在大屏幕下也會生效

向下覆蓋 同時寫了小的判斷和大的判斷, 滿足大的條件會生效大的條件的樣式, 大的條件寫在后面會把小的條件的樣式覆蓋

在大屏幕下顯示4列 中屏幕顯示3列 小屏幕顯示2列 超小屏幕顯示1列

  /*w 768~992  每一行放置兩個子元素  50%*/
  @media screen and (min-width: 768px){
      .box > div{
          width: 50%;
      }
  }
  /* w 992~1200 每一行放置三個子元素  33.33%*/
  @media screen and (min-width: 992px){
      .box > div{
          width: 33.33%;
      }
  }
  /*w >1200 每一行放置四個子元素 25%*/
  @media screen and (min-width: 1200px){
      .box > div{
          width: 25%;
      }
  }

原理就是通過媒體查詢判斷條件改變盒子的寬度

特點：靈活簡介，代碼優雅，美觀大方

好處：Bootstrap 讓我們的Web開發更簡單，更快捷

版本：目前市面上使用最多的是3.x.x版本 除此之外還有2.3.2對IE8支持 現已有4.0.0的正式版

相關鏈接: 中文官網 使用Bootstrap構建的網站

jquery : 庫 便捷的DOM (你想實現什么功能就調用什么方法)(主導者是你 你調用庫)

Bootstrap : 框架 界面工具集 框架是他來控制你 (框架制定好了一系列規則 用戶按照規則進行編寫)可以實現整個網站大多數功能

插件 : fullpage 功能比較單一 只是實現了網頁里面的某個或幾個功能

先引入Bootstrap的CSS(如果想要主題可以在引入帶主題的CSS)

再引入自己的CSS

先引入jquery(因為Bootstrap依賴jquery)

再引入Bootstrap的JS

再引入自己的JS

先引入第三方的框架

再引入自己的文件

CSS放到head里面引入(有些特殊的JS文件對頁面渲染有作用的要放到head中)

js放到body結束標簽是上面引入

視口: 瀏覽器的可視窗口 在PC端是會受到瀏覽器窗口變化而變化

視口在PC端是可視窗口(會變的) 在移動端有一個固定的值 通常是默認980

但是默認移動端的時候980會造成網頁的縮放或者出滾動條

解決移動端默認視口會造成網頁縮放和滾動條 設置meta標簽設置默認是視口的寬度等于設備的寬度

視口的其他屬性 初始化縮放 initial-scale=1.0 是否允許用戶縮放 user-scalable=no 最大 maximum-scale=1.0 和最小縮放 minimum-scale=1.0

meta:vp+tab 凡是寫移動端頁面一來就是加上視口

1.

http-equiv="X-UA-Compatible" 表示設置IE瀏覽器的兼容模式

content="IE=edge" 表示讓IE瀏覽器用最新的渲染引擎渲染頁面

概要 (常用)

布局容器

柵格系統 (常用)

xs : 超小屏幕 手機 (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面顯示器 (≥992px)

lg : 大屏幕 大桌面顯示器 (≥1200px)

預置排版樣式

統一預制標簽樣式

文本對齊 (常用)

改變大小寫

代碼樣式

頁面輸出代碼

表格樣式

各種表格樣式

表單樣式

各種表單組合的樣式

按鈕樣式

各種按鈕顏色 和 按鈕大小等樣式 (常用)

圖片樣式

圖片圓角的樣式

輔助工具類

內容塊居中 (常用)

快速浮動 和 清除浮動 (常用)

顯示隱藏 (常用)

響應式工具類 (常用)

hidden-xx : 在某種屏幕下隱藏

visible-xx : 在某種屏幕尺寸下顯示

基礎CSS這塊只是將我們常用想一些元素的樣式做了美化,如果需要使用直接拿過來用就行了

導航 (常用)

導航條 (常用)

面包屑導航

下拉菜單 (常用)

按鈕式下拉菜單

按鈕組

輸入框組

警告框

頁頭

分頁

列表組 (常用)

面板 (常用)

媒體對象 (常用)

進度條

Glyphicons字體圖標 (常用)

標簽

徽章

縮略圖

大屏幕

嵌入內容

內嵌

將我們日常使用的一些功能塊例如下拉菜單,提前寫好,我們使用時直接找到對應的demo然后拿回來做相應調整就行了

模態對話框 (常用)

下拉菜單 (常用)

滾動監聽 (常用)

標簽頁 (常用)

工具提示

彈出框

警告框

按鈕

折疊面板 (常用)

輪播圖 (常用)

吸頂效果 (常用)

data-spy="affix"

data-offset-top="什么位置出現"

data-offset-bottom="什么位置消失"

jQuery

Bootstrap 框架中的所有JS組件都依賴jquery實現

├─ /project/ ··················· 項目所在目錄
└─┬─ /css/ ······················· 自己的CSS文件
  ├─ /font/ ······················ 使用到的字體文件
  ├─ /img/ ······················· 使用到的圖片文件
  ├─ /js/ ························ 自己寫的JS腳步
  ├─ /lib/ ······················· 從第三方下載回來的庫【只用不改】
  ├─ /favicon.ico ················ 站點圖標
  └─ /index.html ················· 入口文件

1. HTML約定

在head中引入必要的CSS文件,優先引入第三方的CSS,方便我們自己的樣式覆蓋

在body末尾引入必要的JS文件,優先引入第三方的JS文件,注意JS文件之間的依賴關系

比如Bootstrap.js 依賴jquery,那就應該先引入jquery.js 然后引用Bootstrap.js

2. CSS約定

除了公共級別的樣式,其余樣式全部由模塊前綴

盡量使用直接子代選擇器 少用間接子代選擇器避免誤殺

body{
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

先劃分好頁面的大容器,然后具體看每一個容器的多帶帶情況

col-xs-[列數]：在超小屏幕下展示幾份

col-sm-[列數]：在小屏幕下展示幾份

col-md-[列數]：在中等屏幕下展示幾份

col-lg-[列數]：在大屏幕下展示幾份

xs : 超小屏幕 手機 (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面顯示器 (≥992px)

lg : 大屏幕 大桌面顯示器 (≥1200px)

此處頂部通欄已經被劃分為四列
text-center的作用就是讓內部內容居中顯示

@font-face {
    font-family: "itcast";
    src: url("../fonts/MiFie-Web-Font.eot") format("embedded-opentype"), url("../fonts/MiFie-Web-Font.svg") format("svg"), url("../fonts/MiFie-Web-Font.ttf") format("truetype"), url("../fonts/MiFie-Web-Font.woff") format("woff");
}

[class^="icon-"],
[class*=" icon-"] {
    /*注意上面選擇器中間的空格
我們使用的名為itcast的字體就是最上面的@font-face的方式聲明*/
    /*當字體名字之間有空格的都要用引號引起來 ,如果沒有空格的話可以不用引號*/
    font-family: itcast;
}

eot : embedded-opentype

svg : svg

ttf : truetype

woff : woff

進入 https://icomoon.io/ 網站

點擊右上角 icomoonApp

點擊左上角 import icons

選中所有導入的圖標

點擊右下角 generate font

點擊左上角 preferences 設置字體名稱 和 類名前綴

點擊download

解壓生成好的壓縮包 里面有demo.html

打開demo.html能夠查看圖標對應類名

使用 的時候 把 fonts文件夾放到項目 并且引入style.css（這里面就定義了那些圖標的類名）

得下載或者生成或者去借(去別的網站拿)一個字體文件

使用@font-face定義一個字體名稱

先指定字體的名稱font-family:"字體名稱";

引入這個字體名稱對應的字體文件 如果不考慮兼容只引入ttf src:url(路徑.ttf) format("truetype")

定義一個圖標的類名來使用圖標

先使用圖標對應的字體名稱font-family:"字體名稱";

指定圖標的編碼放到類名的偽元素的content里面 content: "e945";

清除默認的斜體

在頁面使用定義好的圖標的類名就可以了

移動web ： 移動端瀏覽器顯示的網頁

移動web的兩種開發方式

響應式開發方式：一套代碼運行多個終端 開發快維護快加載慢 適配好 用在一些新建的網站對速度要求不高的

純原生移動web開發 ：分別寫兩套代碼 開發慢維護慢加載快 適配差 用在一些已經上線的了PC再次開發移動web 對加載速度要求高的網頁

響應式開發原理

CSS3媒體查詢實現

媒體查詢語法

  @meida screen and (){

    sreen and 可以省略 如果不省略 and前后要有空格

  }

媒體查詢的條件判斷和順序說明

1. 媒體查詢有兩個條件判斷 min-width: 屏幕寬度大于等于某個值成立 條件判斷要從小到大寫
2. max-width：屏幕寬度小于等于某個值成立 條件判斷要從大到小寫

媒體查詢的特性

1. 向上兼容 ： 沒有寫大的判斷 也能生效小屏幕的判斷
2. 向下覆蓋 ： 同時寫了小和大屏幕的判斷 大屏幕在后面會覆蓋小屏幕的樣式

響應式開發框架Bootstrap： 靈活簡介 代碼優雅 美觀大方

使用Bootstrap框架

下載

引入bootstrap

  1. 先引入bootstrap.css
  2. 引入jquery
  3. 引入bootstrap.js

視口 : 瀏覽器可視窗口移動端設置視口和設備一樣寬

布局容器 .container : 固定寬度且居中 .container-fluid 寬度100%

柵格系統

柵格系統的4個檔次
col-xs w<768
col-sm 768col-md 992col-lg w>1200

柵格系統默認一行分為12列
分成4列 col-xx-3
分理3列 col-xx-4
分理2列 col-xx-6
分理1列 col-xx-12

搭建項目 fonts css/font.css img lib

創建Index.html 引包 先引入第三方 再引入自己的

創建頁面的骨架

搭建頂部通欄 .container>.row>col-md-2col-md-5col-md-2col-md-3

字體圖標

bootstrap官方圖標 組件->字體圖標 拷貝圖標類名即可

自己生成字體圖標 icomoon.io網站生成

引入生成好的字體圖標樣式文件同時字體文件要放在旁邊

bootstrap的按鈕 全局CSS -> 按鈕