開發一套小型響應式項目流程

基本知識點

媒體查詢

  • 關鍵字
    • and
    • or
    • not（not 的范圍到逗號為止）
media = "only screen and (min-width:401px)"

使用媒體查詢的時候最好帶上 only 關鍵字，因為舊的瀏覽器不支持媒體查詢這樣反而不識別這段查詢代碼，不會響應布局。如果不帶關鍵字 only 那么瀏覽器會只識別 `media = "screen..."，就只會有一種布局。

  • 常用的屬性簡介

    • width/height：視口寬度/布局視口
    • device-width/height：屏幕寬度/可視視口
    • 以上四個屬性都可以添加 min-/max- 前綴
    • orientation：設備方向

  • 理想視口
    <meta name="viewport" content="width=device-width" />

分析設計圖

  • 設計原則
    • 漸進增強
    • 優雅降級（推薦）
    • 先設計大屏還是小屏根據實際案例
    • 先在一個瀏覽器調試好（推薦谷歌）
    • 設置斷點（屏幕分辨率的分界點）
      • 一般根據屏幕尺寸類別（大中?。┰O置臨界點而不不是針對某個特定手機分辨率

一般小型項目的目錄結構

- ResponsiveWeb（總項目）
    - doc(項目相關文檔文件夾)
    - .editorconfig（統一代碼風格，編輯器會優先按照里面的設置來格式化代碼）
    - .gitignore（git提交時要忽略的文件）
    - LICENSE.txt（保存版權聲明）
    - README.md（項目簡介）
    - CHANGLOG.md（項目版本更新、修復內容介紹）
    - src（源代碼）
        - css
            - main.css（通用）
            - normalize.css（重置）
            - login.css（對應頁面）
        - js
            - main.js（通用頁面）
            - verdor（第三方庫文件夾）
                - jquery.js
        - img（圖片）
        - index.html
        - login.html（功能頁面）
        - 404.html（默認錯誤頁）
        - robots.txt（搜索引擎查看的文件，確定可以抓取的內容（非強制））
        - favicon.ico(網站logo)
        - humans.txt（保存網站團隊信息等，給別人看的）

開始編寫代碼

  • 編碼格式
    <meta charset="utf-8">，要放在 title 之前，否則會無效

  • 兼容模式（IE8后開始，IE11后此文檔模式被棄用）

<meta http-equiv="x-ua-compatible" content="ie-edge">
<!-- equiv中的內容表示對 IE 瀏覽器開啟兼容模式，content 中的內容表示渲染模式，edge表示強制使用 IE 最新的渲染模式,content="ie=EmulateIE7"表示IE7渲染模式 -->
  • IE條件注釋
//IE hack gt（大于）,lt（小于）,gte（大于等于）,lte。IE8不支持H5和媒體查詢,注意IE 和版本號之間要有空格
<!--[if lte IE 8]>
    <p>您的瀏覽器版本過低，請更新<a >browsehappy</a></p>
<![endif]-->

  • 命名規范
    注意標簽語義化，class 命名使用 - 分割，id 命名一般用于 js，使用 _ 分割（或者駝峰命名法）。

    • section,article 最好有標題，沒有合適的標題用 DIV 嵌套即可。

  • 使用圖片
    必不可少的圖片使用 <img> 引入，而裝飾線的圖片可以使用 CSS 樣式引入。

PC 端開發

  • CSS Resets（重置默認樣式）
    推薦使用 Normalize.css。

  • px,em,rem
    響應式布局一般使用 em/rem，響應式布局一般不要求百分百還原。

    • rem
      • 不建議使用 rem 設置行高，因為谷歌瀏覽器有字體號下限

小技巧

  • 關于相鄰選擇符
    設置導航欄時，有的時候第一個元素不需要設置樣式，可以通過相鄰選擇符來設置，比如 li + li

  • 關于 inline-block 產生的間距解決方案

    • 可以給子元素設置 margin 負值
    • 刪除 html 中子元素的空白字符
    • 給父元素 font-size:0 子元素再設置 font-size
    • 給父元素和子元素設置不同的 letter-spacing

  • 雪碧圖 siprites

    • 利用 background-position 定位

  • 透明度

    • 只需要背景色透明，利用 RGBA

  • box-sizing

    • 可以改變盒模型的計算方式，對于inline-block 的布局可以簡化計算

  • content 中的空格

    • 使用 content:'最新公告：\00a0\00a0';//\00a0即空格

  • 文字不換行并使用省略號

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

  • 相同圖片不同顏色

  • 清除浮動

    • 父容器末尾添加一個子元素，樣式 clear:both（不建議）

    • 給父容器添加 overflow:auto/hidden; 屬性

    • 給父元素也設置浮動屬性（不建議，影響頁面布局）

    • 使用 :after 偽元素

      .clearfix:after {
    content: ".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    zoom: 1;//為了兼容 IE6，IE7，觸發 haslayout
}

    • 觸發 BFC（原理就是觸發BFC）

      • float
      • overflow:auto/hidden
      • display:table-cell/table-caption/inbline-block
      • position:fixed/absolute

    • 改進方案

      .clearfix:before,
.clearfix:after { //before防止頂部疊加
    content: " ";
    display: table;
}

.clearfix:after {
clear: both;
}

移動端開發

  • 媒體查詢
    可以寫在樣式表最后或則每個變化元素之后。

  • 確定斷點

    • 根據設計稿來設計。利用谷歌開發者工具查看。最低寬度可以限制為 320px，低于這個就不需要適配了。
    • 寫媒體查詢的時候可以同屏顯示兩個窗口，方便寫樣式

  • CSS3選擇器

  • 表格響應式處理（在小屏幕下的解決方案）

    • 隱藏表格不重要的列
    • 表格橫列倒置
    • 轉變成表單格式展示

  • 針對打印的 樣式

@media print {
   *,
   *:before,
   *:after { // 清除背景色
       background: transparent !important;
       color: #000 !important;
       box-shadow: none !important;
       text-shadow: none !important;
   }
   a,
   a:visited { // 加下劃線
       text-decoration: underline;
   }
   a[href]:after {
       content: "("attr"(href)")";
   }
   footer {
       width: 100%;
   }
   a[href^="#"]:after,
   a[href^="javascript:"]:after { // js調試的不用打
       content: "";
   }
   pre,
   blockquote {
       border: 1px solid #999;
       page-break-inside: avoid;
   }
   thead {
       display: table-header-group;
   }
   tr,
   img {
       page-break-inside: avoid;
   }
   img {
       max-width: 100% !important;
   }
   p,
   h2,
   h3 {
       orphans: 3; // 分頁時底部保留的最少行數
       widows: 3; // 分頁時頂部保留的最少行數
   }
   h2,
   h3 {
       page-break-after: avoid; //避免在元素后插入分頁符
   }
}

  • 響應式廣告和圖片

    • 挑選第三方組件
      • 使用人數
      • 是否開源
      • 文檔是否齊全
      • 活躍性
      • 輕量級
      • OwlCarousel2（建議使用。201610）

  • 響應式圖片

    • js 或服務端
      • 獲取客戶端尺寸后動態更改圖片源或者服務器判斷后返回
    • srcset 屬性配合 sizes（實現在不同分辨率下顯示一張圖片的不同規格）
      • <img srcset="img/480.png 480w,img/800.png 800w" sizes="(min-width:800px) 800px, 100vw">
      • w 為圖片尺寸，vw 為視口寬度，sizes 告訴瀏覽器圖片的寬度占整個div的百分比，瀏覽器也會根據此來設置圖片寬度，可以設置媒體查詢 瀏覽器會用自己的規則（網絡，尺寸等）綜合考慮后更改圖片源
    • picture（實現多組圖片匹配）
    <picture>
    <source media="(min-width:36em)" srcset="img/xxx.jpg 768w"/>
    <source media="(min-width:36em)" srcset="img/xxx.jpg 1800w"/>
    <source type="image/svg+xml" srcset="xxx.svg 800w,xxx.svg 1800w"/>//如果瀏覽器支持該格式的圖片就會顯示
    <img src="xxx.jpg">
</picture>
// 瀏覽器會匹配媒體查詢/或者條件查詢后的結果然后顯示對應的圖片

  • 小工具

    • polyfill（填平瀏覽器兼容的坑，解決兼容性的統稱，腳本，可以放心的使用新特效）
      • picturefill 庫（可以使用上面提到的 picture srcset）
    • 圖片在線壓縮網站

設備兼容性調試

發布前需要進行兼容性測試，虛擬機。

安卓虛擬機
iOS虛擬機可以用 XCode

  • 兼容性解決

    • 使用新特性前去 caniuse 查看
    • 瀏覽器hacks
    • 使用庫
      • polyfill
        • resopnd（IE678 媒體查詢）
      • shiv
        • html5shiv（HTML5新標簽）
      • Modernizr（檢測新特性的兼容性，再做不同情況的樣式處理）

  • 在多個設備進行測試

    • browsersync
      可以多個瀏覽器同時查看網頁。http://www.browsersync.cn/?？梢酝ㄟ^ npm 安裝

    • 啟動服務

      • `browser-sync start --server "目錄" --files "監聽的文件，可以通配符或者文件夾，寫目錄也行"

Node.js簡介

是一個基于 Chrome V8 引擎的 JS 運行環境?？梢栽诜?JS 環境下運行 JS 代碼。npm 是其中一個功能。

npm 的使用

  • install xx

    在當前文件目錄下執行 npm install jquery 就會安裝插件

  • node_modules 文件夾

    使用 npm 安裝的第三方庫會統一安裝到這個目錄下，沒有必要進行 git,svn 版本管理，使用 package.json 進行統一的包管理即可。

  • package.json

    運行命令 npm init，向導配置后生成一個 json 文件

{
  "name": "nodetest",
  "version": "1.0.0",
  "description": "readme.txt",
  "main": "test.js",
  "dependencies": {
    "jquery": "^3.1.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
  "author": "",
  "license": "ISC"
}

  • dependencies，生產環境（上線）所需要的包

  • devDependencies，開發項目時需要的包寫在這里

  • "jquery": "^3.1.1"

    • ^ 表示大版本號要一致，總的版本號要大于等于該版本
    • ~ 表示前幾位要一致，后一位可以不同
    • 如果無前綴則是精確版本

  • 利用 npm 安裝依賴包

    直接運行 npm install 即可，會根據 package.json 安裝依賴的包

    • npm install xx --production 安裝到生產包
    • npm install xx --dev 安裝到開發環境包
    • npm install -g jquery 安裝后全部本地項目不需要安裝

  • 更新 package.json

    安裝包的時候加上后綴。

    • --save-dev 開發環境
    • --save 生產環境

  • 卸載包

    uninstall，要更新 package.json 也要加上 save 后綴

  • 更新包

    update 包

局域網訪問（遠程訪問）

  • 使用 http-server

    npm install http-server -g

  • 設定根目錄

    • http-server [path][options]//path 即文件路徑。啟動后會提供兩個地址，一個本地一個局域網
    • http-server [path] -p [端口號]指定端口

Ctrl+C結束服務。

打包發布

發布前的代碼優化

  • 壓縮/合并/增加版本號
    • 手動在線壓縮
    • 使用工具
      • Grunt/自動化構建工具
      • Gulp/自動化構建工具，推薦
      • Webpack/靜態資源打包工具

Gulp 介紹

npm 安裝，一般作為開發依賴項安裝，生產環境不需要使用。npm install gulp --save-dev
注意：該包全局安裝后還需要在項目安裝一次。繼續安裝插件（可以在gulp官網查詢功能）
npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

  • gulp-rev 添加版本號，給文件名添加哈希碼，內容更新后哈希碼會改變，告訴客戶端的緩存需要更新。減少人工維護
  • gulp-rev-replace 添加哈希碼后，更新文件中的引用名
  • gulp-useref 可以在HTML里通過注釋的形式寫方法，告訴 gulp 應該如何操作注釋里面的內容
<!-- build:css css/combined.css -->
引用CSS//把全部CSS壓縮為 combined.css
<!-- endbuild -->
<!-- build:js js/combined.js -->
引用js
<!-- endbuild -->
  • gulp-filter 過濾器，比如篩選出全部js文件壓縮后放回，再選擇其他文件操作
  • gulp-uglify 壓縮 js 代碼
  • gulp-csso 壓縮 css 代碼

創建 gulpfile.js 定義 gulp 的任務，在里面定義好任務，然后通過 gulp taskName//若名字為 default 即默認任務 執行任務。

// 簡單的一個打包壓縮代碼，gulpfile.js
var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');
// 如果是default任務名，執行時可不聲明
gulp.task('default',function(){
    var jsFilter = filter('**/*.js',{restore: true});
    var cssFilter = filter('**/*.css',{restore: true});
    var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore: true})//抓取全部文件但排除index.html（為了保留默認首頁文件名）;

    return gulp.src('src/index.html')//這里src設置要操作的文件
        .pipe(useref())//抓取注釋后需要操作的代碼到“水流中”
        .pipe(jsFilter)//篩選出JS
        .pipe(uglify())//進行壓縮操作
        .pipe(jsFilter.restore)//操作完JS后扔回流里
        .pipe(cssFilter)
        .pipe(csso())
        .pipe(cssFilter.restore)
        .pipe(indexHtmlFilter)
        .pipe(rev())//生成哈希號版本名
        .pipe(indexHtmlFilter.restore)
        .pipe(revReplace())//更新引用
        .pipe(gulp.dest('dist'));//扔入到該目錄
});
//注意：注釋中 `/*! 這樣寫的注釋不會被壓縮  */ `

壓縮完改動后生成的舊版本 css 不要去刪除，因為可能有用戶在訪問，除非過去很多個版本了。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前言 本文默認你已經安裝好node環境，并且熟悉node命令，和window cd命令。 gulp簡介 基于nod...
    9I閱讀 1,993評論 4贊 50
  • gulpjs是一個前端構建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數，API也非常簡單，學...
    井皮皮閱讀 1,324評論 0贊 10
  • gulpjs是一個前端構建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數，API也非常簡單，學...
    依依玖玥閱讀 3,185評論 7贊 55
  • gulpjs是一個前端構建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數，API也非常簡單，學...
    小裁縫sun閱讀 952評論 0贊 3
  • gulpjs是一個前端構建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數，API也非常簡單，學...
    build1024閱讀 540評論 0贊 0