开发一套小型响应式项目流程

2016-10-26  本文已影响79人  kk孜然

基本知识点

媒体查询

media = "only screen and (min-width:401px)"

使用媒体查询的时候最好带上 only 关键字，因为旧的浏览器不支持媒体查询这样反而不识别这段查询代码，不会响应布局。如果不带关键字 only 那么浏览器会只识别 `media = "screen..."，就只会有一种布局。

分析设计图

一般小型项目的目录结构

- 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 http-equiv="x-ua-compatible" content="ie-edge">
<!-- equiv中的内容表示对 IE 浏览器开启兼容模式，content 中的内容表示渲染模式，edge表示强制使用 IE 最新的渲染模式,content="ie=EmulateIE7"表示IE7渲染模式 -->

//IE hack gt（大于）,lt（小于）,gte（大于等于）,lte。IE8不支持H5和媒体查询,注意IE 和版本号之间要有空格
<!--[if lte IE 8]>
    <p>您的浏览器版本过低，请更新<a href="http://browsehappy.com/">browsehappy</a></p>
<![endif]-->

PC 端开发

小技巧

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

移动端开发

@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; //避免在元素后插入分页符
   }
}

设备兼容性调试

发布前需要进行兼容性测试，虚拟机。

安卓虚拟机
iOS虚拟机可以用 XCode

Node.js简介

是一个基于 Chrome V8 引擎的 JS 运行环境。可以在非 JS 环境下运行 JS 代码。npm 是其中一个功能。

npm 的使用

{
  "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"
}

局域网访问（远程访问）

Ctrl+C结束服务。

打包发布

发布前的代码优化

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

<!-- build:css css/combined.css -->
引用CSS//把全部CSS压缩为 combined.css
<!-- endbuild -->
<!-- build:js js/combined.js -->
引用js
<!-- endbuild -->

创建 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 不要去删除，因为可能有用户在访问，除非过去很多个版本了。

上一篇 下一篇

猜你喜欢

热点阅读