企業網站開發總結

在這裡工作了近一個月，也做過大大小小的幾個企業站，現在就這些站點做一些總結歸納，形成一個統一的制作标準流程，友善日後開發效率的提高。

目錄

• 目錄結構
• 常用工具
• 技術棧
• 常用插件
• 适應裝置
• 遊覽器相容
• 打包預覽

目錄結構

本次目錄結構采用騰訊前端IMWEB團隊制定的代碼規範。

• 騰訊前端代碼倉庫
• 騰訊前端代碼規範PC版
• 騰訊前端代碼規範REM版

website
└───fonts
│   │   DIN-Bold.otf
│   │   iconfont.css
│
└───images
|    │   a.jpg
|    │   b.jpg
|    |   icon.png
|
└───styles
|    |   reset.css
|    |   index.css
|    |   child.css
|    |   ie.css
|
└───scripts
|    |   jquery.js
|    |   swiper.min.js
|    |   index.js
|    |   ie.js
└───video
|    |   a.mp4
|   index.html
|   about.html
|   product.html
|   news.html
|   contact.html
|   .gitignore
|   deploy.sh
│   README.md
           

目錄檔案一般使用git進行代碼版本管理，每次改動可以很清晰的看到改動的地方。

常用工具

• 設計稿：PSCC2019
• 編輯器：vscode
• 遊覽器：谷歌(主)，ie/360/火狐(為輔)
• http服務：live-server
• CSS/JS編譯器：koala

技術棧

• 原生html5
• 原生css3
• 原生es6

常用庫插件

• jquery主要是js的便攜使用庫；
• swiper主要是制作輪播圖；
• zoomsl主要是制作圖檔放大鏡；
• animate主要是css3動畫；
• wow主要是動畫特效；

适用裝置

pc端常用分辨率

• 17/19英寸正屏：

  1280*1024

• 18.5英寸：

  1366*768

• 19英寸：

  1440*900

• 20英寸：

  1600*900

• 21.5英寸：

  1920*1080

• 22英寸：

  1680*1050

• 23英寸/24英寸：

  1920*1080

• 27英寸：

  1920*1080/2560*1440

• 30英寸：

  2560*1600

手機端常用分辨率

螢幕比

• 4:3
  • VGA

    640*480

    (Video Graphics Array)
  • QVGA

    320*240

    (Quarter VGA)
  • HVGA

    480*320

    (Half-size VGA)
  • SVGA

    800*600

    (Super VGA)
• 5:3
  • WVGA

    800*480

    (Wide VGA)
• 16:9
  • FWVGA

    854*480

    (Full Wide VGA)
  • HD

    1920*1080

    High Definition
  • QHD

    960*540

  • 720p

    1280*720

    标清
  • 1080p

    1920*1080

    高清

手機

• iphone4/4s:

  960*640

  (3:2)
• iphone5:

  1136*640

• 小米1:

  854*480

  (FWVGA)
• 小米2:

  1280*720

分辨率對應DPI

• “HVGA mdpi”
• "WVGA hdpi "
• "FWVGA hdpi "
• "QHD hdpi "
• “720P xhdpi”
• "1080P xxhdpi "

遊覽器相容

開發步驟

• 首先使用chrome遊覽器進行開發；
• 針對不同裝置的分辨率進行微調；
• 針對不同遊覽器進行微調；

部分代碼

• 判斷不同遊覽器

function checkBrowserName () {
    let browserName = '';
    if (navigator.userAgent.indexOf('Chrome') != -1) {
      browserName = 'Chrome';
    } else if (navigator.userAgent.indexOf('Trident') != -1 || navigator.appVersion.indexOf('MSIE') != -1) {
      browserName = 'IE';
    } else if (navigator.userAgent.indexOf('Firefox') != -1) {
      browserName = 'Firefox';
    } else if (navigator.userAgent.indexOf('Opera') != -1) {
      browserName = 'Opera';
    } else if (navigator.userAgent.indexOf('Safari') != -1) {
      browserName = 'Safari';
    }
    return browserName;
  }
           

• 判斷ie遊覽器版本型号

// 擷取ie版本
function getIeVersion() {
    var ie = navigator.userAgent.indexOf('Trident') == -1 ? false : true;
    var version = navigator.appVersion;
    var versionName = '';
    if (ie && version) {
        if (version.indexOf('rv:11.0') != -1) {
            return versionName = 'ie11'
        } else if (version.indexOf('MSIE 10.0') != -1) {
            return versionName = 'ie10'
        } else if (version.indexOf('MSIE 9.0') != -1) {
            return versionName = 'ie9'
        } else if (version.indexOf('MSIE 8.0') != -1) {
            return versionName = 'ie8'
        } else if (version.indexOf('MSIE 7.0') != -1) {
            return versionName = 'ie7'
        }
    }
    return -1;
}
           

• 統一添加頁面樣式

let ieVer = getIeVersion();

if (ieVer !== -1) {
    document.body.className = 'ie';
    document.body.id = 'ieb';
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'styles/ie.css';
    document.head.appendChild(link);
}
           

• sass rem代碼

$baseFontSize: 16px;

@mixin px2rem ($name, $px) {
    #{$name}: $px / $baseFontSize * 1rem;
}

@function pxToRem ($px) {
    @return $px / $baseFontSize * 1rem;
}

div {
  width: pxToRem(30);
}
           

• 移動端js動态字型

如果設計稿是

750px

的，字型是

16px

，那麼除以就是

750/16

,依此類推。

打包預覽

• 優化壓縮
  • fonts字型壓縮；字客網
  • 圖檔壓縮；tinypng
  • css壓縮；vscode-plugin-minify
  • js壓縮；vscode-plugin-minify
  • html不壓縮；

• 預覽

  使用

  live-server

  進行預覽檢視，

  指令：

  # 自定義端口号
  # 文法如下
  live-server --port=<port>
  # 示例如下
  live-server --port=4001
             

• 壓縮包釋出

  這一步驟就是針對整個網站檔案進行zip/rar進行壓縮，便于傳輸。

目前就是此次做網站的一些開發總結，以後會逐漸補充一些的。