#响应式开发的概念及其学习
- 用于改变布局
- 通过媒体查询(medium query)进行页面重构：
- 在小屏幕上扩大链接的目标区（更好遵循触摸屏的费茨定律）
- 对某些元素有选择的显示或者隐藏，优化导航功能
- 设置响应式排字法，渐进改变字体大小和行距
##旧版浏览器中媒介查询的支持
- 2007年JQuery的插件有限媒体查询，针对链接最小宽度和最大宽度
- 近期推出的css3-mediaquries.js
- 老版本浏览器处理
media="only screen and (min-width:401px) and (max-width:600px)",会解析为media="only"，忽略后面的内容
##未来技术
- 流动网格(fleible grid layout)，弹性图片(flexible image)，媒体查询(media queries)
响应式网站是一个设计理念，是多项技术的综合体（不是单纯的自适应布局，弹性布局等概念）
##响应式网站的优点
- 减少工作量
- 网站、设计、代码、内容都只需要一份
- 多出来的工作是对js，css的改动
- 节省时间
- 每个设备都能得到正确的设计
##响应式网站的缺点
- 会加载更多的样式和脚本资源
- 设计比较难精确定位和控制
- 老版本浏览器兼容性较差
##浏览器一览
- Statcounter分区域统计浏览器用户量
##响应式网站设计实现原则
-
progressive enhancement 渐进增强
-
graceful degrdation 优雅降级
-
不管设备大小，都显示一样的内容
-
断点的选择
- 0-480小屏幕
- 481-800 中屏幕
- 801-1400大屏幕
- 1400+超大屏幕
##如何组织项目目录结构 *
- html lang="zh-CN"
<meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge">代表IE的兼容模式，ie=edge表示以最新的IE浏览器模式渲染界面 4.`
##HTML5新标签
<header>
</header>
<footer></footer>
<!--导航-->
<nav></nav>
<!--article和section都是语义化标签,对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。-->
<article></article>
<section></section>
<!--仅仅使文字醒目,不一定重要-->
<b></b>
<!--文字是醒目且重要的-->
<em></em>
<!--有差异的-->
<i></i>
class表样式，命名时使用中横线分隔如class="top-head"
id一般用于js区分标签等。
##必不可少的图片用<img>,可有可无的使用styles
##没有标题的section定义为div（可有可无）
- Css resets还是继承链不好调试,
- Css重置所有样式，而Normalize.css则是该重置的重置，该保留的保留
##黑色一般设置为color:#222（偏深灰，现在的设计不使用纯黑，降低对比度）
-
em 相对的长度单位
-
em相对参照物为父元素的font-size
-
em具有继承的特点
-
当没有设置font-size的时候，浏览器会有一个默认的em设置：1em=16px
-
em缺点：容易混乱
-
rem
-
相对参照物为根元素html，相对参照物固定不变，所以比较好计算
-
当没有设置font-size的时候，浏览器会有一个默认的rem设置，1em=16px,这里和em一致
##清楚浮动：
-
<div style="clear:both"> -
overflow: auto;
-
现在使用的方法
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
兼容IE6，IE7
.clearfix{
zoom:1;
}
- 哪些属性可以触发BFC： 如：
display:block;
display:table-cell;
display:inline-block;
position:fixed;
position:absolute;
background-color:#ccc;
##尼古拉斯大师的改进方案
这段代码的height:0 visibility:hidden就是为了隐藏元素
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
可以改成匿名表格单元
.clearfix:after,.clear:before{
content:"";
display:table;
clear:both;
}
.clear:before：为了清除margin-top,bottom 叠加,不写也可以
##中文版chrome中如果使用line-height=3rem会转成36px，（中文字体大小有下限，低于12px就会使用默认最小12px,英文是10px）
##inline-block之间会有间隙(原因是html代码中的空白符导致的，比如回车换行)
- 可以将回车换行去掉
- 将父节点的font-size设置为0（会引入副作用：出现padding-bottom,要重新知道子元素font-size）
- li标签重写成这样
- li标签不闭合
- 设置父边距
margin-left=-3px（有的浏览器显示不一样）
目前还没有可以完美解决的办法
##Css sprite
- 增加滤镜：使用filter,但是有时候IE可以识别，Chrome不能识别（使用
-webkit-filter:grayscale(100%)） - 不需要自己去记，可以通过autoprefixer这个网站，输入css之后自动加前缀。
- @media的优先级比较高，是在html样式执行前就会执行的，所以
1rem=16px使用的是默认值
- 基本选择器
- 所有元素，如
div * - 元素选择器，如
div a .class#id- 后代选择器
>子元素选择器（直接子元素）+相邻元素选择器（选中与其相邻的后一个元素）~通用兄弟元素选择器（选中后面所有的元素）
- 所有元素，如
- 属性选择器
E[attr]如a[href]E[attr='value']如a[href="www.baidu.com"]E[attr*'value']E[attr^='value']以某种开头（有点像正则）E[attr$='value']以某种结尾（有点像正则）E[attr~='value']包含该属性E[attr|='value']和^类似但是这个选择器还可以包括/
- CSS3选择器:nth-child和:nth-of-type的差别
- 看一个例子
p:nth-child(2)指的是父元素的第二个子元素，并且子元素类型是p才会选中，如果不是p则没反应 p:nth-of-type(2)指的是父元素的第二个类型为p的子元素，只要父元素有第二个类型为p的子元素，必然能找到
- 看一个例子
- 支持不同数量的图片
- 支持响应式布局
- 具有良好的兼容性
- 可以加入其它参数等
- OwlCarousel
- Zepto：移动端Jquery
- 使用人数
- 是否开源
- 文档是否齐全
- 活跃性
- 轻量级
- 很多列的表格在中小屏幕显示的比较丑
- 隐藏表格中不重要的列
- 行列倒置
- 使用表单摞起来
加载与用户设备相匹配的小图片，即快速，又不会影响用户的体验
- 图片的排版与布局
- 对应不同的设备大小进行图片匹配（增加了UI设计师的工作量）
- js或者服务端
- srcset
- srcset配合sizes
- sizes(媒体查询，)
- picture (对IE浏览器完全不兼容，但是有个picturefill可以解决这个问题)，在引入
<script src="js/vendor/picturefill.min.js"></script>之后，使用picture方法如下
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width:50em)">
<source srcset="img/ad001-m.png" media="(min-width:30em)">
<img src="img/ad001.png" alt="2015">
</picture>
</div>
- svg（illustrator，或者在线svg生成）
- picturefill库 这个库可以对不支持picture属性的IE浏览器使用js获取
srcset和媒体查询的一些设置，再通过js来设置输出什么样的图片
- npm的使用
- npm init 创建一个全新的package名称
- dependencies生产环境的依赖
- devDependecies
^包版本依赖的版本大于等于该版本 - 修改
pakage.json的依赖后可以使用npm i或者npm install按照json里规定的依赖包 npm install --save将依赖添加到生产环境中去npm install --save-dev将依赖添加到开发环境中去
- node启动server服务
sudo npm isntall http-server -ghttp-server src指定路径control + c终止服务- github:http-server
- 通用处理方法：CSS Hack
- Polyfill 如Respond用来使得IE6-8支持媒体查询
- shiv 如html5shiv，使得IE8以下能支持HTML5的元素
- modernizr 主动检测浏览器是否支持新特性modernizr
- 企业级测试testin
- 安卓虚拟机不推荐使用eclipse中的,推荐genymotion
-
省时的浏览器同步测试工具browsersync
-
简单使用
安装 BrowserSync
npm install -g browser-sync
// --files 路径是相对于运行该命令的项目（目录） browser-sync start --server --files "css/*.css
-
压缩
- 手工代码压缩css js压缩
-
打包发布主流的3个工具
- 自动化构建工具：
- Grunt
- Gulp
- 静态资源打包工具
- WebPack
- 自动化构建工具：
-
合并
-
增加版本号
-
安装
sudo npm install gulp --save-dev -
新建
gulpfile.js用来保存gulp的任务,var gulp= require('gulp'); gulp.task('hello',function () { console.log("hello"); }); -
运行任务
gulp hello
sudo 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中可以通过注释的方法写一些设置，比如根据这样的注释
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
就能合并这两个css文件到一个文件combined.css中去
<link rel="stylesheet" href="css/combined.css"/>
- gulp-filter筛选和恢复文件流
- gulp-uglify压缩js代码的主要插件
- gulp-css压缩css代码的主要插件
/*! */的注释不会被压缩，可用来声明版权- 来看一段gulpfile代码：
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 () {
var cssFilter=filter('*/*.css',{restore:true});
var jsFilter=filter('*/*.js',{restore:true});
var indexHtmlFilter=filter(['**/*','!**/index.html'],{restore:true});
return gulp.src('src/index.html')
.pipe(useref())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev())
.pipe(indexHtmlFilter.restore)
.pipe(revReplace())
.pipe(gulp.dest('dist'))
});
- 其他插件如
gulp-watch监听文件改变、gulp-postcss为css文件添加一些前缀、gulp-concat合并js、gulp-responsive生成响应式的图片
- 常用快捷键
control+M找闭合标签alt+shift+上下交互代码位置- 插入下一行
shift + enter,插入上一行alt+shift+enter - 回到上次编辑的地方
command+shift+退格键
- 定位到图片
control+ space +space
- 图片预览宽高
shift悬浮光标到src中去
- 点击色块出现拾色器
- 标签，变量等重命名
control +T右击可以exinclude - 报错信息提示：按住
f2切换错误位置，按alt + enter可以出现错误提示 Commoand + Mouse调节代码区大小，如果不能就要设置这个选项Editor->General->Change Font Size with Command + Mouse Wheel
- 同时修改多个光标位置的内容(不对齐的话Reformat code
command+ALT+L)，如
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
###Emmet
Emmet是大幅度提高前端开发效率的一个工具,
主要用到的是这5个字符> + ^ * ()来生成标签，使用. # [] 命名$ 内容{}
-
生成无意义的文本
lorem5后面跟着的数字表示无意义单词的数量 -
注意事项：
- 不要加空格
- 光标在末尾按
tab键才能不全
-
css中的Emmet书写
- 写
w按tab，输出width: - 写
m10按tab,输出margin:10px
- 写
- Bootstrap
- Foundation
- Semantic UI
- Pure.css
- 使用框架的缺点：
- 体积大，使用起来不方便
- 样式单调，没有创新
- 大多数只适合做后台管理系统
##产品经理的设计工具
- 草图绘制：mockup
- 原型设计：Axure
- 原型设计&UI设计：Sketch
- 选择切片选项->编辑切片选项直接设置宽高
- 文件->存储为web所用格式->选择图片保存格式：
- 有动画的选择只能是
gif - 对于没有动画的，颜色比较少，需要透明的，选择
GIF|PNG 8位 - 对于颜色比较多，需要透明的，选择
PNG 24位 - 对于不需要透明，颜色比较多的，选择
JPEG
- 有动画的选择只能是
- Flinto for mac
- Principle