什么是响应式开发
就是一个网站能够兼容多个终端。
在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。
通常的做法是针对移动端单独做一套特定的版本。
但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。
那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，
在开发当中，一套页面能响应多种终端并且在各种终端下显示的布局和内容不一样而且展示的比较合理，或者说一个网站能适配多种屏幕尺寸类型的网站。这样的一个开发模式就是响应式。
我们一般用bootstrap来帮助我们完成响应式建站。
响应式开发的原理
CSS3中的Media Query（媒介查询）
代码：
@media screen and (min- 768px){}
@media screen and (min- 992px){}
@media screen and (min- 1200px){}也可以
@media (max- 767px){}
@media (min- 768px) and (max- 991px){}
@media (min- 992px) and (max- 1199px){}
@media (min- 1200px){}媒体查询可以指定查询的属性screen也可以不指定默认回去查询屏幕。
可以使用css覆盖的原理，也可以定义区间范围，可以多条件查询。
/*利用媒体查询*/
/*不写screen默认的是它*/
/*1.当屏幕宽度超过1200px的时候 版心宽度限制为1170px 背景颜色是红色*/
@media screen and (min- 1200px){
.container{
1170px;
background: red;
}
}/*利用媒体查询*/
/*不写screen默认的是它*/
/* 3.当屏幕宽度超过768px不超过992px的时候 版心宽度限制为750px 背景颜色是绿色*/
@media (min- 768px){
.container{
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框架
<!DOCTYPE html><!--html5文档格式-->
<html lang="zh-CN"><!--申明语言是中文简体-->
<head>
<meta charset="utf-8">
<!--当是IE的是试用最新的渲染引擎来渲染页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--让页面适配移动端 需要加上 user-scalable=0 让用户不予许缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
<!--页面的加载顺序和解析顺序 -->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>template</title>
<!-- Bootstrap 核心css文件-->
<link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!--IE8一下就不支持html5标签和媒体查询-->
<!--
html5标签要支持的话？ 引入 html5shiv
media query 要支持的话？ 引入 respond
-->
<!--注意：要已http形式打开你的页面 否者respond不生效-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--条件注释-->
<!--[if lt IE 9]>
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.min.js"></script>
<![endif]-->
<!--TODO 自己项目的文件-->
</head>
<body>
<!--TODO 自己项目页面内容-->
<h1>你好，世界！</h1>
<!--引入jquery 因为bootstrap是依赖-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap 核心js文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<!--TODO 自己项目js文件-->
</body>
<!--模块化 导航条 默认样式的导航条-->
<nav class="navbar navbar-default">
<!--导航内容的容器-->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--汉堡菜单-->
<!--
data-toggle 当前这个组件是 collapse组件 显示吟唱
data-target 当前这个组件控制的元素是谁 目标是谁？
-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!--screen read only 默认隐藏-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--logo区块-->
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
!-- 加上carousel 指定当前的容器是轮播图 data-ride="carousel" 申明是一个轮播图组件-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!--点容器-->
<ol class="carousel-indicators">
<!-- data-target 控制是那个轮播图 data-slide-to 控制的是轮播图当中的第几章图 索引指定是内容容器的item的索引-->
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-tar
<ul class="nav nav-tabs" role="tablist">
<!--data-toggle=tab 申明的是一个tab组件 href指向控制的目标元素-->
<li role="presentation"
轮播图
在pc端：使用的是背景图片
在移动端使用的是图片
在写静态demo的时候使用的是响应是工具来完成的图片响应
但是会加载两种图片
那么这时候就需要做图片的响应式了
首先我们准备了json 中有两种数据
然后通过模版引擎解析成html
最终把解析完成的html渲染在页面当中。
underscore插件 中的template模板引擎
<!--<div>
<p><span>xjj</span>:<span>10</span></p>
<p><span>xxj</span>:<span>11</span></p>
</div>-->
<div id="box"></div>
<!--<script type="text/javascript"></script>-->
<!--/*模版就是一段html不会解析的字符串*/-->
<!--在 <% js代码 %>-->
<!-- 怎么样去值 通过=号取值 渲染成html标签 还可以通过-获取 文本字符-->
<script id="box_template" type="text/template">
<%_.each(model,function(obj,index){%>
<p><span style="color: red"></span>:<span><%=obj.age%></span></p>
<%});%>
</script>
<script>
/*准备一个数组*/
var dataList = [
{name:'xdsjj',age:'<script>alert(0);</script>'},
{name:'xdsxj',age:'11111'}
]
/*准备模版*/
/*模版就是一段html不会解析的字符串*/
/*转化成模版方法*/
/*jquery是$. underscore 调用方法是 _.*/
/*模版当中的字符串*/
var templateStr = document.querySelector('#box_template').innerHTML;
console.log(templateStr);
/*得到一个模版方法 function*/
var templateFuc = _.template(templateStr);
/*把你想要解析的数据传递给这个方法 就可以返还给你想要的解析后的html结构*/
/*给你想要传递的数据取一个名字*/
var templateHtml = templateFuc({model:dataList});
console.log(templateHtml);
/*把html字符渲染到页面上*/
document.querySelector('#box').innerHTML = templateHtml;简介
作者：Twitter 公司两位前端工程师（mark otto && jacob thornton）在2011发起开发完成的。
中文网站：中文官网 http://www.bootcss.com/
特点：
为什么选择bootstrap
优点：
有自己的生态圈，不断的更新迭代。
提供了一套简洁、直观、强悍的组件。
标配准化的html+css编码规范。
让开发更简单，提高了开发的效率。
注意：虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式。把默认样式粘贴 到当前css中 改类名或添加模块类名
版本
2.x.x 停止维护
优点：兼容性好
缺点：代码不够简洁，功能不够完善。
3.x.x 目前使用最多
稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好。
偏向用于开发响应式布局、移动设备优先的 WEB 项目。
4.x.x 测试阶段
Map文件更偏响应式，移动设备，代码更精简。
通常使用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- 640px){
html{
font-size: 100px;
}
}
@media screen and (max- 480px){
html{
font-size: 75px;
}
}
@media screen and (max- 320px){
html{
font-size: 50px;
}
}
header{
height: 1rem;
/*320px 50px*/
/*640px 100px*/
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*/
100%;
background: green;
font-size: 0.5rem;
line-height: 1rem;
text-align: center;
color: #fff;
}
</style>
<script>
window.onresize = function(){
var size = 50;/*基准是320*/
var width = window.innerWidth;
/*根据当前的屏幕尺寸计算fontSize的值*/
var fontSize = 50/320*width;
/*动态设置字体大小*/
document.querySelector('html').style.fontSize = fontSize + 'px';
}
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/)
[中文网](http://lesscss.cn/)
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{
100%;
display: block;
img{
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%);
}