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

基本知识点

媒体查询

• 关键字
  • and
  • or
  • not（not 的范围到逗号为止）

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

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

• 常用的属性简介

  • width/height：视口宽度/布局视口
  • device-width/height：屏幕宽度/可视视口
  • 以上四个属性都可以添加 min-/max- 前缀
  • orientation：设备方向

• 理想视口
  

分析设计图

• 设计原则
  • 渐进增强
  • 优雅降级（推荐）
  • 先设计大屏还是小屏根据实际案例
  • 先在一个浏览器调试好（推荐谷歌）
  • 设置断点（屏幕分辨率的分界点）
    • 一般根据屏幕尺寸类别（大中小）设置临界点而不不是针对某个特定手机分辨率

一般小型项目的目录结构

- 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（保存网站团队信息等，给别人看的）

开始编写代码

• 编码格式
  ，要放在 title 之前，否则会无效

• 兼容模式（IE8后开始，IE11后此文档模式被弃用）

• IE条件注释

//IE hack gt（大于）,lt（小于）,gte（大于等于）,lte。IE8不支持H5和媒体查询,注意IE 和版本号之间要有空格

• 命名规范
  注意标签语义化，class 命名使用 - 分割，id 命名一般用于 js，使用 _ 分割（或者驼峰命名法）。

  • section,article 最好有标题，没有合适的标题用 DIV 嵌套即可。

• 使用图片
  必不可少的图片使用 引入，而装饰线的图片可以使用 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;

• 相同图片不同颜色

  • 使用滤镜 filter 属性
  • 前缀可以通过 在线添加前缀网站 生成

• 清除浮动

  • 父容器末尾添加一个子元素，样式 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（实现在不同分辨率下显示一张图片的不同规格）
    • w 为图片尺寸，vw 为视口宽度，sizes 告诉浏览器图片的宽度占整个div的百分比，浏览器也会根据此来设置图片宽度，可以设置媒体查询 浏览器会用自己的规则（网络，尺寸等）综合考虑后更改图片源
  • picture（实现多组图片匹配）

  
      
      
      //如果浏览器支持该格式的图片就会显示
      
  
  // 浏览器会匹配媒体查询/或者条件查询后的结果然后显示对应的图片
  

  • 使用 svg

    • 在线创建网站1 icomoon
    • 在线创建网站2 editor

• 小工具

  • 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 应该如何操作注释里面的内容

引用CSS//把全部CSS压缩为 combined.css


引用js

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