響應式佈局開發

時間  2019-12-28
標籤 響應 佈局 開發 简体版
原文   原文鏈接

目錄

  1. 移動web介紹和兩種開發方式(響應式開發方式 原生的開發方式)
  2. 響應式的原理(CSS3的媒體查詢)
  3. 響應式開發框架(Bootstrap) 的介紹和基本信息-優點-版本
  4. 瞭解框架和庫的區別 主導者不同
  5. 入門Bootstrap 起步 下載和引包
  6. 閱讀Bootstrap的文檔 瞭解經常使用的全局CSS樣式 和 組件 和JS插件
  7. 搭建項目目錄結構
  8. 建立主頁引包 設置網頁字體和空結構
  9. 字體圖標的生成 和使用
  10. 總結

移動web前言

  1. 移動web ： 移動端手機瀏覽器或者微信裏面瀏覽的網頁
  2. 移動APP ： 手機上須要下載安裝的應用程序

1. 移動web介紹

1.1 響應式開發 一套代碼運行多個終端 優勢:開發快 維護快 適配好 缺點加載速度慢

1.2 純原生移動web開發 一套代碼運行一個端 優勢: 加載速度快 缺點開發慢 維護慢 適配差

1.3 應用場景 :

  1. 響應式開發用在一些新建的網站(PC和移動同時出來) 對加載速度要求不是很高
  2. 純原生移動web開發 通常會用在一些已經有PC端上線的網站 再次開發移動端 移動端須要加載速度很快的網站

2. 響應式開發原理

2.1 CSS3的媒體查詢： 經過查詢屏幕的的寬度來指定某個寬度區間的網頁佈局

2.2 常見設備的屏幕寬度

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

2.3 媒體查詢的語法

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

    and的先後必須有空格  條件一般只有兩個 min-width max-width

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

    能夠簡寫省略 screen and

2.4 媒體查詢的寫法的順序和特性

2.4.1 條件判斷有兩種

min-width 屏幕寬度大於等於某個值生效 (最小寬度)

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

2.4.2 條件判斷的參考值一般有如下4個

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

2.4.3 媒體查詢判斷的順序說明

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

/*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條件判斷到時候 條件判斷大小 要從大到小寫html

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

2.3.4 寫法的特性有兩個

  1. 向上兼容 只寫了小的判斷, 大的判斷沒有寫, 可是在大屏幕下也會生效
  2. 向下覆蓋 同時寫了小的判斷和大的判斷, 知足大的條件會生效大的條件的樣式, 大的條件寫在後面會把小的條件的樣式覆蓋

2.3.5 使用媒體查詢實現網頁佈局

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

    /*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%;
      }
  }
  2. 原理就是經過媒體查詢判斷條件改變盒子的寬度

3. 響應式開發框架 Bootstrap介紹

  1. 特色：靈活簡介，代碼優雅，美觀大方
  2. 好處：Bootstrap 讓咱們的Web開發更簡單，更快捷
  3. 版本：目前市面上使用最多的是3.x.x版本 除此以外還有2.3.2對IE8支持 現已有4.0.0的正式版
  4. 相關連接: 中文官網 使用Bootstrap構建的網站

4. 庫和框架的區別

  1. jquery : 庫 便捷的DOM (你想實現什麼功能就調用什麼方法)(主導者是你 你調用庫)
  2. Bootstrap : 框架 界面工具集 框架是他來控制你 (框架制定好了一系列規則 用戶按照規則進行編寫)能夠實現整個網站大多數功能
  3. 插件 : fullpage 功能比較單一 只是實現了網頁裏面的某個或幾個功能

5. Bootstrap的基本使用

5.1 下載: 去Bootstrap官網中文官網 的起步裏面下載生產環境的Bootstrap 解壓以後把整個文件夾放到項目裏面來 也可使用BootstrapCDN

5.2 引入Bootstrap

  1. 先引入Bootstrap的CSS(若是想要主題能夠在引入帶主題的CSS)
  2. 再引入本身的CSS
  3. 先引入jquery(由於Bootstrap依賴jquery)
  4. 再引入Bootstrap的JS
  5. 再引入本身的JS
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- html5 shiv是爲了讓低版本IE支持html5新標籤  -->
    <!-- respond.js是爲了讓低版本IE支持CSS3媒體查詢 -->
    <!-- 可是注意respond.js須要在服務器下運行 就是localhost 不能再file下運行否則沒法工做 -->
    <!-- 條件註釋 IE版本小於IE9 條件成立就執行下面的代碼  若是條件不成立就是註釋不執行 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
    <!-- bootstrap的JS插件依賴jquery 因此要先引入jquery -->
    <script src="lib/jquery/jquery.min.js"></script>
    <!-- 在引入Bootstrap的JS文件 -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

5.3 引包的順序

  1. 先引入第三方的框架
  2. 再引入本身的文件
  3. CSS放到head裏面引入(有些特殊的JS文件對頁面渲染有做用的要放到head中)
  4. js放到body結束標籤是上面引入

5.4 視口

  1. 視口: 瀏覽器的可視窗口 在PC端是會受到瀏覽器窗口變化而變化
  2. 視口在PC端是可視窗口(會變的) 在移動端有一個固定的值 一般是默認980
  3. 可是默認移動端的時候980會形成網頁的縮放或者出滾動條
  4. 解決移動端默認視口會形成網頁縮放和滾動條 設置meta標籤設置默認是視口的寬度等於設備的寬度<meta name="viewport" content="width=device-width">
  5. 視口的其餘屬性 初始化縮放 initial-scale=1.0 是否容許用戶縮放 user-scalable=no 最大 maximum-scale=1.0 和最小縮放 minimum-scale=1.0
  6. meta:vp+tab 凡是寫移動端頁面一來就是加上視口

5.5 瀏覽器兼容模式

1.<meta http-equiv="X-UA-Compatible" content="IE=edge">java

  1. http-equiv="X-UA-Compatible" 表示設置IE瀏覽器的兼容模式
  2. content="IE=edge" 表示讓IE瀏覽器用最新的渲染引擎渲染頁面

6. Bootstrap文檔

6.1 基礎CSS樣式

  • 概要 (經常使用)jquery

    • 佈局容器

  • 柵格系統 (經常使用)git

    • xs : 超小屏幕 手機 (<768px)
    • sm : 小屏幕 平板 (≥768px)
    • md : 中等屏幕 桌面顯示器 (≥992px)
    • lg : 大屏幕 大桌面顯示器 (≥1200px)

  • 預置排版樣式github

    • 統一預製標籤樣式
    • 文本對齊 (經常使用)
    • 改變大小寫

  • 代碼樣式web

    • 頁面輸出代碼

  • 表格樣式bootstrap

    • 各類表格樣式

  • 表單樣式

    • 各類表單組合的樣式

  • 按鈕樣式

    • 各類按鈕顏色 和 按鈕大小等樣式 (經常使用)

  • 圖片樣式

    • 圖片圓角的樣式

  • 輔助工具類

    • 內容塊居中 (經常使用)
    • 快速浮動 和 清除浮動 (經常使用)
    • 顯示隱藏 (經常使用)

  • 響應式工具類 (經常使用)

    • hidden-xx : 在某種屏幕下隱藏
    • visible-xx : 在某種屏幕尺寸下顯示
  • 基礎CSS這塊只是將咱們經常使用想一些元素的樣式作了美化,若是須要使用直接拿過來用就好了

6.2 預製界面組件

6.3 Javascript 插件

6.4 Javascript插件依賴狀況

  • jQuery

    Bootstrap 框架中的全部JS組件都依賴jquery實現

7. 項目搭建

7.1 搭建Bootstrap頁面骨架及項目目錄結構

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

7.1.1 約定編碼規範

1. HTML約定
  1. 在head中引入必要的CSS文件,優先引入第三方的CSS,方便咱們本身的樣式覆蓋
  2. 在body末尾引入必要的JS文件,優先引入第三方的JS文件,注意JS文件之間的依賴關係

好比Bootstrap.js 依賴jquery,那就應該先引入jquery.js 而後引用Bootstrap.js

2. CSS約定
  1. 除了公共級別的樣式,其他樣式所有由模塊前綴
  2. 儘可能使用直接子代選擇器 少用間接子代選擇器避免誤殺

7.2 建立主頁 引入相應的文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <script src="lib/jquery/jquery.js"></script>
  <script src="lib/bootstrap/bootstrap.js"></script>
  <script src="index.js"></script>
</body>
</html>

7.3 在咱們默認樣式表中講默認字體設置爲

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

7.4 完成頁面空結構

先劃分好頁面的大容器,而後具體看每個容器的單獨狀況 
<!--  頭部區域 -->
  <header></header>
  <!-- /頭部區域 -->
  <!--  廣告輪播 -->
  <section></section>
  <!-- /廣告輪播 -->
  <!--  當即預定 -->
  <section></section>
  <!-- /當即預定 -->
  <!--  產品介紹 -->
  <section></section>
  <!-- /產品介紹 -->
  <!--  新聞資訊 -->
  <section></section>
  <!-- /新聞資訊 -->
  <!--  合做夥伴 -->
  <section></section>
  <!-- /合做夥伴 -->
  <!-- 腳註區域 -->
  <footer></footer>
  <!-- /腳註區域 -->

8. 柵格系統

<div class="row">
  <div class="col-md-2">
  </div>
  <div class="col-md-5">
  </div>
  <div class="col-md-2">
  </div>
  <div class="col-md-3">
  </div>
</div>

1. row類

<div class="row">
</div>

2. col-**-* 類

<div class="col-md-3">
</div>
  • col-xs-[列數]：在超小屏幕下展現幾份
  • col-sm-[列數]：在小屏幕下展現幾份
  • col-md-[列數]：在中等屏幕下展現幾份
  • col-lg-[列數]：在大屏幕下展現幾份
  • xs : 超小屏幕 手機 (<768px)
  • sm : 小屏幕 平板 (≥768px)
  • md : 中等屏幕 桌面顯示器 (≥992px)
  • lg : 大屏幕 大桌面顯示器 (≥1200px)
此處頂部通欄已經被劃分爲四列
text-center的做用就是讓內部內容居中顯示

9.字體圖標

1. 字體圖標生成網站 

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

2. 字體格式

  • eot : embedded-opentype
  • svg : svg
  • ttf : truetype
  • woff : woff

3. 字體圖標生成步驟

  1. 進入 https://icomoon.io/ 網站
  2. 點擊右上角 icomoonApp
  3. 點擊左上角 import icons
  4. 選中全部導入的圖標
  5. 點擊右下角 generate font
  6. 點擊左上角 preferences 設置字體名稱 和 類名前綴
  7. 點擊download
  8. 解壓生成好的壓縮包 裏面有demo.html
  9. 打開demo.html可以查看圖標對應類名
  10. 使用 的時候 把 fonts文件夾放到項目 而且引入style.css（這裏面就定義了那些圖標的類名）

4. 字體圖標的使用步驟

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

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

    1. 先指定字體的名稱font-family:"字體名稱";
    2. 引入這個字體名稱對應的字體文件 若是不考慮兼容只引入ttf src:url(路徑.ttf) format("truetype")

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

    1. 先使用圖標對應的字體名稱font-family:"字體名稱";
    2. 指定圖標的編碼放到類名的僞元素的content裏面 content: "e945";
    3. 清除默認的斜體
  4. 在頁面使用定義好的圖標的類名就能夠了

總結

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

  2. 移動web的兩種開發方式

    1. 響應式開發方式：一套代碼運行多個終端 開發快維護快加載慢 適配好 用在一些新建的網站對速度要求不高的
    2. 純原生移動web開發 ：分別寫兩套代碼 開發慢維護慢加載快 適配差 用在一些已經上線的了PC再次開發移動web 對加載速度要求高的網頁

  3. 響應式開發原理

    1. CSS3媒體查詢實現

    2. 媒體查詢語法

      @meida screen and (){

    sreen and 能夠省略 若是不省略 and先後要有空格

  }

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

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

    4. 媒體查詢的特性

      1. 向上兼容 ： 沒有寫大的判斷 也能生效小屏幕的判斷
2. 向下覆蓋 ： 同時寫了小和大屏幕的判斷 大屏幕在後面會覆蓋小屏幕的樣式
  4. 響應式開發框架Bootstrap： 靈活簡介 代碼優雅 美觀大方

  5. 使用Bootstrap框架

    1. 下載

    2. 引入bootstrap

      1. 先引入bootstrap.css
  2. 引入jquery
  3. 引入bootstrap.js
  6. 視口 : 瀏覽器可視窗口移動端設置視口和設備同樣寬
  7. 佈局容器 .container : 固定寬度且居中 .container-fluid 寬度100%

  8. 柵格系統

    1. 柵格系統的4個檔次
      col-xs w<768
      col-sm 768<w<992
      col-md 992<w<1200
      col-lg w>1200
    2. 柵格系統默認一行分爲12列
      分紅4列 col-xx-3
      分理3列 col-xx-4
      分理2列 col-xx-6
      分理1列 col-xx-12
    1. 搭建項目 fonts css/font.css img lib
    2. 建立Index.html 引包 先引入第三方 再引入本身的
    3. 建立頁面的骨架
    4. 搭建頂部通欄 .container>.row>col-md-2col-md-5col-md-2col-md-3

    5. 字體圖標

      1. bootstrap官方圖標 組件->字體圖標 拷貝圖標類名便可
      2. 本身生成字體圖標 icomoon.io網站生成
      3. 引入生成好的字體圖標樣式文件同時字體文件要放在旁邊
    6. bootstrap的按鈕 全局CSS -> 按鈕
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程