什么是响应式开发
就是一个网站能够兼容多个终端。
在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。
通常的做法是针对移动端单独做一套特定的版本。
但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。
那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
在开发当中，一套页面能响应多种终端并且在各种终端下显示的布局和内容不一样而且展示的比较合理，或者说一个网站能适配多种屏幕尺寸类型的网站。这样的一个开发模式就是响应式。
我们一般用bootstrap来帮助我们完成响应式建站。
响应式开发的原理
CSS3中的Media Query（媒介查询）
代码：
@media screen and (min-width: 768px){}@media screen and (min-width: 992px){}@media screen and (min-width: 1200px){}
也可以
@media (max-width: 767px){}@media (min-width: 768px) and (max-width: 991px){}@media (min-width: 992px) and (max-width: 1199px){}@media (min-width: 1200px){}
媒体查询可以指定查询的属性screen也可以不指定默认回去查询屏幕。
可以使用css覆盖的原理，也可以定义区间范围，可以多条件查询。
/*利用媒体查询*/ /*不写screen默认的是它*/ /*1.当屏幕宽度超过1200px的时候 版心宽度限制为1170px 背景颜色是红色*/ @media screen and (min-width: 1200px){ .container{ width: 1170px; background: red; } }/*利用媒体查询*/ /*不写screen默认的是它*/ /* 3.当屏幕宽度超过768px不超过992px的时候 版心宽度限制为750px 背景颜色是绿色*/ @media (min-width: 768px){ .container{ width: 750px; background: green; } }
通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕（移动设备） 768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px以上
响应式开发的前景
现在的移动设备屏幕越来越大。
越来越多的设计师也采用了这种设计。
在新建站的一些网站现在普遍采用的响应式开发。
那么在前端开发当中也是一项必备的技能。
响应式开发和移动web开发的区别
扩展的选择器
结构选择器
相邻选择符 (E+F)
语法：E+F{ }
说明：选择紧贴在E元素之后F元素。
兄弟选择符 (E~F)
语法：E~F{ }
说明：选择E元素后面的所有兄弟元素F。
/*选择当前的这个元素的下一个兄弟元素*/ /*div + div{ color: red; }*/ /*选择当前的这个元素的下面所有的兄弟元素*/ div ~ div{ color: red; } 声明新字体图标 @font-face { font-family: 'wjs_fonts'; src: 下面的文件是已经准备好的字体图标库 直接引入 然后类名声明 url('../fonts/MiFie-Web-Font.svg') format('svg'), url('../fonts/MiFie-Web-Font.ttf') format('truetype'), url('../fonts/MiFie-Web-Font.woff') format('woff'), url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'); } .wjs_icon{ font-family: wjs_fonts; } .wjs_icon_phone::before{ content: "\e908"; } Bootstrap框架
template 你好，世界！
!-- 加上carousel 指定当前的容器是轮播图 data-ride="carousel" 申明是一个轮播图组件-->
轮播图
在pc端：使用的是背景图片
在移动端使用的是图片
在写静态demo的时候使用的是响应是工具来完成的图片响应
但是会加载两种图片
那么这时候就需要做图片的响应式了
首先我们准备了json 中有两种数据
然后通过模版引擎解析成html
最终把解析完成的html渲染在页面当中。
underscore插件 中的template模板引擎
简介
作者：Twitter 公司两位前端工程师（mark otto && jacob thornton）在2011发起开发完成的。
官方网站：
中文网站：中文官网
特点：
为什么选择bootstrap
优点：
有自己的生态圈，不断的更新迭代。
提供了一套简洁、直观、强悍的组件。
标配准化的html+css编码规范。
让开发更简单，提高了开发的效率。
注意：虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式。把默认样式粘贴 到当前css中 改类名或添加模块类名
版本
2.x.x 停止维护
优点：兼容性好
缺点：代码不够简洁，功能不够完善。
3.x.x 目前使用最多
稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好。
偏向用于开发响应式布局、移动设备优先的 WEB 项目。
4.x.x 测试阶段
M ap文件更偏响应式，移动设备，代码更精简。
通常使用css和js 压缩的过程。
如果出错 显示浏览会提示那一行出错。
Map就是提供了记录代码位置的文件
Bootstrap常用样式
container类
用于定义一个固定宽度且居中的版心
row类
因为每一个列默认有一个15px的左右外边距，row类的一个作用就是通过左右-15px屏蔽掉这个边距
col-**-*类
col-xs-[列数]：在超小屏幕下展示几份
col-sm-[列数]：在小屏幕下展示几份
col-md-[列数]：在中等屏幕下展示几份
col-lg-[列数]：在大屏幕下展示几份
xs : 超小屏幕 手机 (<768px)
sm : 小屏幕 平板 (≥768px)
md : 中等屏幕 桌面显示器 (≥992px)
lg : 大屏幕 大桌面显示器 (≥1200px)
push pull
hidden 类
hidden-xs,hidden-sm,hidden-md,hidden-lg在不同的屏幕下隐藏。
text-* 类
text-center 文本居中
text-left 文本左对齐
text-right 文本右对齐
pull-* 类
pull-left 左浮动类
pull-right 右浮动类
center-block 类
让一个固定宽度的元素居中。
标签属性
这些属性都是提供给屏幕阅读器的，我们可以忽略。
role
aria-*
class="sr-only"
指定插件类型，和被控制的目标元素
data-toggle
data-target
/*a标签也可以通过href来指定被控制的目标元素*/
rem
/*em的大小是基于父元素来计算的 更本的讲就是本身 字体大小*/ /*默认的字体大小是多少 16px*/ font-size: 2em;
*?REM到底以谁为基准？ R？指的是root 根元素 html 以html的字体大小来计算的*/ /*默认的字体大小是多少 16px*/ font-size: 2rem;
1 rem和媒体查询 结合可以自适应
@media screen and (max-width: 640px){ html{ font-size: 100px; } } @media screen and (max-width: 480px){ html{ font-size: 75px; } } @media screen and (max-width: 320px){ html{ font-size: 50px; } } header{ height: 1rem; /*320px 50px*/ /*640px 100px*/ width: 100%; background: green; font-size: 0.5rem; line-height: 1rem; text-align: center; color: #fff; } 2 js和 rem结合 自适应
header{ height: 1rem; /*320px 50px*/ /*640px 100px*/ width: 100%; background: green; font-size: 0.5rem; line-height: 1rem; text-align: center; color: #fff; }
less
Less环境安装
安装nodejs
在部分win8系统当中无法安装
（解决办法的是 已管理员权限运行cmd然后再按写命令切换到安装包目录，直接命令执行）
安装完成nodejs之后
检测是否安装完成 node –v 查看版本
然后检测 npm是否自带 npm –v 查看版本
在线安装
然后 运行 npm install –g less (部分电脑要 sudo 管理权限)
Lessc –v 查看版本 是否安装成功
离线安装
Npm.Zip解压进去。
Webstorm配置
bstorm配
学习less
[官网](http://lesscss.org/)
[中文网]()Webstrom 插件
Lessc less.less less.css 编译less文件成css
简介
CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。
作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
LESS 原理及使用方式
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
语法
变量
Mixin混入
嵌套
Import
函数（内置函数）
变量
LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
/*-----------------变量-----------------*/@mainColor:#E93223;
body{ color: @mainColor;}
Mixin混入
Mixin（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixin（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
/*-----------------mixin 混入----------------*//*颜色*/.red{
color: @mainColor;}.border{ border: 1px solid #ccc;}.redBorder(){ color: @mainColor; border: 1px solid #ccc;}.mixin-class{ .red(); .border();}.mixin-fuc{ .redBorder();}
嵌套
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式
/*------------------嵌套------------------*//*轮播图*/#wjs_banner{
.carousel-inner{ > div.item{ a.img_box{ background: url("../images/slide_01_2000x410.jpg") no-repeat center center; height: 410px; /*调用redBorder mixin*/ display: block; .redBorder(); /*调用@mainColor 变量*/ &:hover{ color: @mainColor; } } a.img_mobile{ width: 100%; display: block; img{ width: 100%; display: block; } } } }}
Import 导入
/*---------------------Import 引入------------------------*/
@import "base";.f_left{ float: @right;}
运算及函数
在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？
http://www.1024i.com/demo/less/reference.html
escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 计算数字的平方根
abs(number); // * 数字的绝对值
sin(number); // * sin函数
asin(number); // * arcsin函数
cos(number); // * cos函数
acos(number); // * arccos函数
tan(number); // * tan函数
atan(number); // * arctan函数
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一个参数对第二个参数取余
convert(number, units); // * 在数字之间转换
unit(number, units); // * 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值（色相）
saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
red(@color); // 从颜色值中提取 'red' 值（红色）
green(@color); // 从颜色值中提取 'green' 值（绿色）
blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值
例子
/*-------------------运算和函数--------------------------*/@back:#333;
.test{ border: 1px solid @back*2; background: lighten(#000, 10%); color:darken(#000, 10%);}