《所向披靡的响应式开发》笔记

设置IE兼容性，强制用最新版本的IE来渲染页面
1
<meta http-equiv="x-ua-compatible" content="ie=edge">
响应式布局<meta>标签设置(用理想视口作为布局视口，初始缩放为1)
1
<meta name="viewport" content="width=device-width, initial-scale=1>
媒体查询@media
- 媒体查询时使用相对单位，是直接相对浏览器默认字体而言的
- user-scalabe = no，禁用用户缩放
- minimum-scale = 1，最小缩放比例
- maximum-scale = 1，最大缩放比例
- width/height，视口宽度/高度
- device-width/height，设备屏幕的宽度/高度
- 设置html字体为62.5%（10/16），达到1rem=10px（浏览器默认字体16px）
  1
  2
  3
  @media only screen and (max-width: 50em) {
  // 当屏幕最大宽度小于等于50em时，设置要改变的样式
  }

响应式图片

<picture>
	<source srcset="img/star@3x.png" media="(min-width:1000px)">
	<source srcset="img/star@2x.png" media="(min-width:500px)">
	<img src="img/star.png">
</picture>
/* 可以使用picturefill库解决兼容性问题 */

判断浏览器版本

1
2
3

<!--[if lte IE 8]>
<p>您的浏览器版本过低，为了更好体验我们的产品，请到<a href="http://browsehappy.com/" target="_blank">这里</a>升级。</p>
<![endif]-->

兼容性检测工具modernizr
- 打开官网
- 在download目录下选择对应的api，点bulid
- 把生产的代码引入（放script文件第一个位置）
- 以svg为例，如果浏览器兼容该特性，则会在<html>标签内生成一个class=‘svg’的类，如果不兼容则会生成no-svg的类
- 针对不同的类，添加css样式
webstorm快捷键
- 在图片地址上按住shift，显示图片
- 右键点击文件(html/css/js)，split可实现分屏显示；local History可以显示历史修改记录
- 多光标：alt + 鼠标左键拖动，连续选择/选择一个，按住alt不放，双击下一个，有目标性选择
- 跳转目标行：ctrl + G
- 代码格式化：ctrl + alt + L
- 历史剪贴板：ctrl + shift + V
- 光标所在行的上方新建行：ctrl + alt + enter
- 光标所在行的下方新建行：shift + enter
- 显示提示信息：ctrl + Q（html、css、js均适用）
- 代码上/下移动：ctrl + shift + 上/下方向键
- Emmet
  - []自定义属性
  - $自动补全数字
  - lorem + 数字，可以生成无意义文本
gulp
- npm init创建package.json，输入name值，其他使用默认值
- npm install gulp --save-dev，在开发环境安装gulp（需全局安装一次gulp（npm install –global gulp），否则命令行无法使用gulp指令）
- 在根目录创建gulpfile.js
- 安装gulp插件
  - gulp-rev：为每个文件添加哈希值，并修改文件名
  - gulp-rev-replace：自动更新引用的文件名（由于gulp-rev对名字的修改）
  - gulp-useref：合并css、js代码
  - gulp-filter：从任务流中筛选出一对象，做相应的处理后在放回任务流中
  - gulp-uglify：js压缩工具
  - gulp-csso：css压缩工具

// 引入插件依赖
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');
// 创建任务
gulp.task('default', function () {
	// 创建js过滤规则
    var jsFillter = filter('**/*.js', {restore: true});
    var cssFilter = filter('**/*.css', {restore: true});
    var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true}); //！是排除，这里把index排除掉
	// 拿到要处理的文件index.html
    return gulp.src('src/index.html')
        .pipe(useref()) 
        .pipe(jsFillter)
        .pipe(uglify())
        .pipe(jsFillter.restore)
        .pipe(cssFilter)
        .pipe(csso())
        .pipe(cssFilter.restore)
        .pipe(indexHtmlFilter)
        .pipe(rev())
        .pipe(indexHtmlFilter.restore)
        .pipe(revReplace())
        .pipe(gulp.dest('dist'));
});

解决`npm`安装速度过慢

通过npm config参数设置
- npm config set registry http://registry.cnpmjs.org
- 加粗地址还可以替换为http://registry.npm.taobao.org
查询npm配置：npm config ls -l，重点看下registry属性是否被替换
--save自动把模块加到package.json的dependencies里
--save-dev自动把模块加到package.json的devDependencies里

解决npm安装速度过慢

解决`npm`安装速度过慢