简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  響應式佈局的開發教程實例

響應式佈局的開發教程實例

小云云
小云云原創
2018-01-29 11:22:142319瀏覽

響應式佈局可以為不同終端的使用者提供更舒適的介面和更好的使用者體驗，而且隨著目前大螢幕行動裝置的普及，用"大勢所趨"來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到許多的創新，也看到了一些成形的模式。

行動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

    #中螢幕（舊式電腦）   992px-1200px

#1

#大螢幕裝置（現代電腦）   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. #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條件判斷到時候條件判斷大小要從大到小寫
    2.   /*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. 2.3.4 寫法的特性有兩個

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

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

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

#在大螢幕下顯示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%;
      }
  }
  1. 原理就是透過媒體查詢判斷條件改變盒子的寬度

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

    3. 特點：靈活簡介，程式碼優雅，美觀大方

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

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

    相關連結: 中文官網使用Bootstrap建構的網站

    2. 4. 函式庫和框架的差別

    3. jquery : 庫便捷的DOM (你想實作什麼功能就呼叫什麼方法)(主導者是你你呼叫庫)

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

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

    #5. Bootstrap的基本使用

  1. 5.1 下載: 去Bootstrap官網中文官網的起步裡面下載生產環境的Bootstrap 解壓縮之後把整個資料夾放到專案裡面來也可以使用BootstrapCDN

    2. 5.2 引入Bootstrap

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

    4. #再引入自己的CSS

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

    6. 再引入Bootstrap的JS

    再引入自己的JS

  1. <!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>
    2. 5.3 引包的順序

    3. 先引入第三方的框架

    4. 再引入自己的檔案

    5. CSS放到head裡面引入(有些特殊的JS檔案對頁面渲染有作用的要放到head中)

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

    2. 5.4 視窗

  2. ##視窗: 瀏覽器的視覺視窗在PC端是會受到瀏覽器視窗變化而變化############視窗在PC端是視覺視窗(會變的) 在行動端有一個固定的值通常是預設980###

  3. 但是默认移动端的时候980会造成网页的缩放或者出滚动条

  4. 解决移动端默认视口会造成网页缩放和滚动条 设置meta标签设置默认是视口的宽度等于设备的宽度

  5. 视口的其他属性 初始化缩放 initial-scale=1.0 是否允许用户缩放 user-scalable=no 最大 maximum-scale=1.0 和最小缩放  minimum-scale=1.0

  6. meta:vp+tab 凡是写移动端页面一来就是加上视口

5.5 浏览器兼容模式

1.

  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>
  <!-- /脚注区域 -->