六月婷婷综合激情-六月婷婷综合-六月婷婷在线观看-六月婷婷在线-亚洲黄色在线网站-亚洲黄色在线观看网站

明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

響應式布局的開發圖文說明教程案例

發表時間：2023-09-18 來源：明輝站整理相關軟件相關文章人氣：

[摘要]響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用"大勢所趨"來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。移動web前言移動web ： 移動端手機瀏覽器或者微信里面瀏覽的網...

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用"大勢所趨"來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

移動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 屏幕寬度小于等于某個值的時候生效 (最大寬度)

2.4.2 條件判斷的參考值通常有以下4個

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

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

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

2.3.4 寫法的特性有兩個

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

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

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

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

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

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

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

6. Bootstrap文檔

6.1 基礎CSS樣式

  • 概要 (常用)

    • 布局容器

  • 柵格系統 (常用)

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

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

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

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

  • 預置排版樣式

    • 統一預制標簽樣式

    • 文本對齊 (常用)

    • 改變大小寫

  • 代碼樣式

    • 頁面輸出代碼

  • 表格樣式

    • 各種表格樣式

  • 表單樣式

    • 各種表單組合的樣式

  • 按鈕樣式

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

  • 圖片樣式

    • 圖片圓角的樣式

  • 輔助工具類

    • 內容塊居中 (常用)

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

    • 顯示隱藏 (常用)

  • 響應式工具類 (常用)

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

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

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

6.2 預制界面組件

  • 導航 (常用)

  • 導航條 (常用)

  • 面包屑導航

  • 下拉菜單 (常用)

  • 按鈕式下拉菜單

  • 按鈕組

  • 輸入框組

  • 警告框

  • 頁頭

  • 分頁

  • 列表組 (常用)

  • 面板 (常用)

  • 媒體對象 (常用)

  • 進度條

  • Glyphicons字體圖標 (常用)

  • 標簽

  • 徽章

  • 縮略圖

  • 大屏幕

  • 嵌入內容

  • 內嵌

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

6.3 Javascript 插件

  • 模態對話框 (常用)

  • 下拉菜單 (常用)

  • 滾動監聽 (常用)

  • 標簽頁 (常用)

  • 工具提示

  • 彈出框

  • 警告框

  • 按鈕

  • 折疊面板 (常用)

  • 輪播圖 (常用)

  • 吸頂效果 (常用)

    • data-spy="affix"

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

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

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>
  <!-- /腳注區域 -->

<!-- ### 7.5 構建頂部通欄

    <p class="topbar hidden-xs hidden-sm">
        <p class="container">
            <p class="row">
                <p class="col-md-2 text-center">
                    <i class="icon-mobilephone"></i> 手機微金所 <i class="glyphicon glyphicon-chevron-down"></i>
                </p>
                <p class="col-md-5 text-center"> <i class="icon-telephone"></i> 4006-89-4006（服務時間：9:00-21:00）
                </p>
                <p class="col-md-2 text-center">常見問題 財富登錄</p>
                <p class="col-md-3 text-center">
                    <a href="" class="btn btn-danger">免費注冊</a>
                    <a href="" class="btn btn-link">登錄</a>
                </p>
            </p>
        </p>
    </p>

7.5.1 container 類 (版心)

  • 用于定義一個固定寬度且居中的版心

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

  <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
      html,
      body {
          margin: 0;
          padding: 0;
      }

      .container {
          height: 200px;
          width: 100%;
          background-color: #f40;
          margin: 0 auto;
      }

      @media (min-width:768px) {
          .container {
              width: 750px;
          }
      }

      @media (min-width:992px) {
          .container {
              width: 970px;
          }
      }

      @media (min-width:1200px) {
          .container {
              width: 1170px;
          }
      }
      </style>
  </head>

  <body>
      <p class="container">
      </p>
      </script>
  </body>

  </html>

8. 柵格系統

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

1. row類

<p class="row">
</p>

2. col-**-* 類

<p class="col-md-3">
</p>

  • 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

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

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

    5. 創建頁面的骨架

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

    7. 字體圖標

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

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

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

相關推薦：

詳解前端響應式布局、響應式圖片，與自制柵格系統

CSS3怎么做出響應式布局

如何實現響應式布局

以上就是響應式布局的開發教程實例的詳細內容，更多請關注php中文網其它相關文章！


網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
主站蜘蛛池模板： 色综合网天天综合色中文男男 | 欧美一级鲁丝片免费看 | 日韩欧美一级 | 欧美一区二区三区不卡免费 | 天天综合天天看夜夜添狠狠玩 | 亚洲欧美日韩在线2020 | 青青草视频免费看 | 伊人国产在线视频 | 色综合久久久久 | 五月婷婷激情综合 | 午夜网站在线观看免费网址免费 | 色欧美亚洲 | 亚洲日韩中文第一精品 | 日韩第四页 | 青娱乐在线免费观看视频 | 日韩影线 | 亚洲 丝袜 制服 欧美 另类 | 亚洲最大成人网色 | 日韩色天使综合色视频 | 亚州视频一区二区 | 伊人手机在线视频 | 奇米综合 | 日韩天天干 | 日韩三级视频在线观看 | 欧美性猛交xxxx乱大交蜜桃 | 色宅男中文字幕亚洲专区 | 欧美一级三级 | 中文一区在线观看 | 午夜a级理论片在线播放 | 欧美一区二区三区成人看不卡 | 午夜性刺激片免费观看成人 | 热热热色| 青青草原综合网 | 天天天天干 | 亚洲激情欧美 | 一级做a视频 | 亚洲视频三区 | 青青青青手机在线观看 | 日本无吗免费一二区 | 欧美一区二区三区播放 | 窝窝午夜色视频国产精品东北 |