企业网站开发总结

在这里工作了近一个月，也做过大大小小的几个企业站，现在就这些站点做一些总结归纳，形成一个统一的制作标准流程，方便日后开发效率的提高。

目录

• 目录结构
• 常用工具
• 技术栈
• 常用插件
• 适应设备
• 游览器兼容
• 打包预览

目录结构

本次目录结构采用腾讯前端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进行压缩，便于传输。

目前就是此次做网站的一些开发总结，以后会逐渐补充一些的。