响应式设计
响应式设计的概念（三要素）
- 流体网格
- 响应式图片
- 媒体查询
相关概念
- 分辨率 resolution
- 是指显示器所能显示的像素的多少
- 像素密度
dpi/ppi- 像素密度（pixels per inch），也称PPi，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。
- 设备像素比
dip/dpr- 用 iPhone4 举个例子，它有 326 DPI 显示屏，根据上表，智能手机的典型观看距离大概16.8英寸，基准像素为 160 DPI。所以要显示一个 CSS 像素，苹果选择将像素比设置为2，所以看起来就和 163 DPI 手机中显示的一样了。
一、viewport
1.定义
- viewport 是用户网页的可视区域。
- 移动端： 布局视口(大部分980px) /理想视口（视口宽度=设备宽度）
2.设置viewport
快捷键:`meta:vp+table`注意：响应式页面必设（视口宽度等于设备宽度，理想视口）
3.设置选项
- width 视口宽度 通常设置为 device-width
- height 视口高度
- initical-scalse 初始化缩放比例
- （有把设备宽度设置为视口宽度的功能）
- 通常设置为1.0(不放大)
- maximun-scale 最大缩放比例
- minmun-scale 最小缩放比例
- user-scaleable: yes/no 是否允许用户手动缩放
二、媒体查询
1.媒体类型
screen用于电脑显示器。print用于打印机。例：@media print{ h1{ font-size:200px; } }- all 用于所有的媒体设备。
- aural 用于语音和音频合成器。
- braille 用于盲人用点字法触觉回馈设备。
- embossed 用于分页的盲人用点字法打印机。
- handheld 用于小的手持的设备。
- projection 用于方案展示，比如幻灯片。
- tty 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv 用于电视机类型的设备。
2.媒体特性
width视口宽度- max-width 最大视口宽度 视口宽度<=某个值
min-width 最小视口宽度 视口宽度>=某个值
例如：h1{ text-align:center; color:#fff; } @media (width:800px) { h1{ color:red; } } @media(max-width:800px){ body{ background:#369; } h1{ color:green; } } @media(min-width:1000px){ body{ background:pink; } }
height视口高度- max-height 最大视口高度
- min-height 最小视口高度
device-width设备宽度- max-device-width 最大设备宽度
min-device-width 最小设备宽度
例如：
device-height设备高度- max-device-height 最大设备高度
- min-device-height 最小设备高度
aspect-ratio可视窗口宽高比- min-aspect-ratio
- max-aspect-ratio
device-aspect-ratio设备的宽高比- max-device-aspect-ratio
min-device-aspect-ratio
例如：
媒体特性-aspect-ratio aspect-ratio 视口宽高比
orientation设备的使用方向landscape(水平)/portrait(垂直方向)
例如：
resolution屏幕像素比 单位 dppx- max-resolution
min-resolution
例如：
3. 媒体查询 用法
1.@media () { css属性 } 2. 3.@import url(css文件) mediaType （智能判断媒体类型） 4.媒体查询的语法
and并且,或者onlyonly + 媒体类型not否定 一定要指定媒体类型，因为媒体类型默认all，not后永远返回假例如：
三、 断点
1.手机 小屏幕
<= 480px
2.平板 中等屏幕
>480px 并且 <= 800px
3.PC 大屏幕
>800px <= 1400px
4. 超大屏幕
>= 1400px例：断点 大屏幕优先
断点 大屏幕优先
四、网格系统
1.使内容先隐藏再显示的方法：
法1.
隐：overflow:hidden;/*避免内容溢出*/ height:0; 现：height:auto;
法2.
隐：display:none; 现：display:block;
2.响应式的网格系统css文件:
/*响应式的网格系统*/ .row:after{ content:""; display:block; clear:both; } /*清除浮动*/ .row::after{ content:""; display:block; clear:both; } [class*="col-"]{ box-sizing: border-box; float:left; padding:7px 8px; } /*小屏幕 < 480px*/ .col-sm-1{ width:8.33%; } .col-sm-2{ width:16.66%; } .col-sm-3{ width:25%; } .col-sm-4{ width:33.33%; } .col-sm-5{ width:41.66%; } .col-sm-6{ width:50%; } .col-sm-7{ width:58.33%; } .col-sm-8{ width:66.66%; } .col-sm-9{ width:75%; } .col-sm-10{ width:83.33%; } .col-sm-11{ width:91.66%; } .col-sm-12{ width:100%; } /*中等屏幕 480px~ 800px*/ @media(min-width:481px) { .col-md-1{ width:8.33%; } .col-md-2{ width:16.66%; } .col-md-3{ width:25%; } .col-md-4{ width:33.33%; } .col-md-5{ width:41.66%; } .col-md-6{ width:50%; } .col-md-7{ width:58.33%; } .col-md-8{ width:66.66%; } .col-md-9{ width:75%; } .col-md-10{ width:83.33%; } .col-md-11{ width:91.66%; } .col-md-12{ width:100%; } } /*大屏幕 >800 px*/ @media(min-width:801px) { .col-lg-1{ width:8.33%; } .col-lg-2{ width:16.66%; } .col-lg-3{ width:25%; } .col-lg-4{ width:33.33%; } .col-lg-5{ width:41.66%; } .col-lg-6{ width:50%; } .col-lg-7{ width:58.33%; } .col-lg-8{ width:66.66%; } .col-lg-9{ width:75%; } .col-lg-10{ width:83.33%; } .col-lg-11{ width:91.66%; } .col-lg-12{ width:100%; } } 五、响应式图片
1.使用背景图片
响应式图片 响应式图片
2.使用H5的picture标签
响应式图片 响应式图片
/*兼容性差，从上到下，如果满足第一个就不会执行下面的了 所以写断点时由大到小写，不兼容的时候，就会显示img*/
3.使用picturefill插件
picturefill.js文件内容：
/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */ (function( w ){ // Enable strict mode "use strict"; w.picturefill = function() { var ps = w.document.getElementsByTagName( "span" ); // Loop the pictures for( var i = 0, il = ps.length; i < il; i++ ){ if( ps[ i ].getAttribute( "data-picture" ) !== null ){ var sources = ps[ i ].getElementsByTagName( "span" ), matches = []; // See if which sources match for( var j = 0, jl = sources.length; j < jl; j++ ){ var media = sources[ j ].getAttribute( "data-media" ); // if there's no media specified, OR w.matchMedia is supported if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){ matches.push( sources[ j ] ); } } // Find any existing img element in the picture element var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ]; if( matches.length ){ var matchedEl = matches.pop(); if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){ picImg = w.document.createElement( "img" ); picImg.alt = ps[ i ].getAttribute( "data-alt" ); } picImg.src = matchedEl.getAttribute( "data-src" ); matchedEl.appendChild( picImg ); } else if( picImg ){ picImg.parentNode.removeChild( picImg ); } } } }; // Run on resize and domready (w.load as a fallback) if( w.addEventListener ){ w.addEventListener( "resize", w.picturefill, false ); w.addEventListener( "DOMContentLoaded", function(){ w.picturefill(); // Run once only w.removeEventListener( "load", w.picturefill, false ); }, false ); w.addEventListener( "load", w.picturefill, false ); } else if( w.attachEvent ){ w.attachEvent( "onload", w.picturefill ); } }( this ));html文件内容：
使用插件 实现 响应式图片
六、使用插件 实现 图片拖动
html文件：
轮播图 滑动插件 
< >swipe.css文件内容
.swipe{ overflow: hidden; position:relative; } .swipe_wrap{ position: relative; overflow: hidden; } .swipe_wrap div{ float:left; position:relative; overflow:hidden; }swipe.js文件:
在git文件中下载 输入命令： bower install swipe.js