响应式设计
响应式设计的概念（三要素）
- 流体网格
- 响应式图片
- 媒体查询
相关概念
- 分辨率 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`
注意：响应式页面必设（视口宽度等于设备宽度，理想视口）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
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 (800px) { h1{ color:red; } } @media(max-800px){ body{ background:#369; } h1{ color:green; } } @media(min-1000px){ body{ background:pink; } }
-
height视口高度- max-height 最大视口高度
- min-height 最小视口高度
device-width设备宽度-
max-device-width 最大设备宽度
-
min-device-width 最小设备宽度
例如：<style> body{ text-align:center; background:#333; } h1{ color:#fff; } @media (max-device- 800px) { body{ background-color:#369; } } </style>
-
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
例如：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wdith,initial-scale=1.0"> <title>媒体特性-aspect-ratio</title> <style> body{ background:#333; color:#fff; text-align:center; } @media (device-aspect-ratio:16/9) { body{ background:#123456; } } @media (max-aspect-ratio:4/3) { body{ background:#123456; } } </style> </head> <body> <h1>aspect-ratio 视口宽高比</h1> </body> </html>
-
orientation设备的使用方向-
landscape(水平)/portrait(垂直方向)
例如：<style> body{ background:#333; color:#fff; text-align:center; } @media (orientation: landscape) { body{ background:#123456; } } </style>
-
resolution屏幕像素比 单位 dppx-
max-resolution
-
min-resolution
例如：<style> body{ background:#333; color:#fff; text-align:center; } @media (min-resolution:2dppx) { body{ background:#369; } } </style>
-
3. 媒体查询 用法
1.@media () {
css属性
}
2.<link href="css文件" media="media_query_list">
3.@import url(css文件) mediaType （智能判断媒体类型）
4.媒体查询的语法
-
and并且 -
,或者 -
onlyonly + 媒体类型 -
not否定 一定要指定媒体类型，因为媒体类型默认all，not后永远返回假例如：<style> body{ margin:0; color:#fff; background:#333; text-align:center; } /*@media (min-400px) and (max-800px) { body{ background:orange; } }*/ /*@media (max-480px),(min-800px) { body{ background:red; } }*/ /*@media not print{ body{ background:pink; } }*/ @media only screen{ body{ background:orange; } } </style>
三、 断点
1.手机 小屏幕
<= 480px
2.平板 中等屏幕
>480px 并且 <= 800px
3.PC 大屏幕
>800px <= 1400px
4. 超大屏幕
-
>= 1400px例：断点 大屏幕优先 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>断点 大屏幕优先</title> <style> body{ margin:0; background:#f5f5f5; } .container{ box-sizing: border-box; margin:10px auto; 100%; padding:20px; border:1px solid #ccc; background:#fff; box-shadow: 0px 3px 5px 3px #ccc; } @media(min-480px) { .container{ 480px; } } @media (min- 768px) { .container{ 750px; } } @media(min-1200px) { .container{ 1000px; } } </style> </head>
四、网格系统
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{
8.33%;
}
.col-sm-2{
16.66%;
}
.col-sm-3{
25%;
}
.col-sm-4{
33.33%;
}
.col-sm-5{
41.66%;
}
.col-sm-6{
50%;
}
.col-sm-7{
58.33%;
}
.col-sm-8{
66.66%;
}
.col-sm-9{
75%;
}
.col-sm-10{
83.33%;
}
.col-sm-11{
91.66%;
}
.col-sm-12{
100%;
}
/*中等屏幕 480px~ 800px*/
@media(min-481px) {
.col-md-1{
8.33%;
}
.col-md-2{
16.66%;
}
.col-md-3{
25%;
}
.col-md-4{
33.33%;
}
.col-md-5{
41.66%;
}
.col-md-6{
50%;
}
.col-md-7{
58.33%;
}
.col-md-8{
66.66%;
}
.col-md-9{
75%;
}
.col-md-10{
83.33%;
}
.col-md-11{
91.66%;
}
.col-md-12{
100%;
}
}
/*大屏幕 >800 px*/
@media(min-801px) {
.col-lg-1{
8.33%;
}
.col-lg-2{
16.66%;
}
.col-lg-3{
25%;
}
.col-lg-4{
33.33%;
}
.col-lg-5{
41.66%;
}
.col-lg-6{
50%;
}
.col-lg-7{
58.33%;
}
.col-lg-8{
66.66%;
}
.col-lg-9{
75%;
}
.col-lg-10{
83.33%;
}
.col-lg-11{
91.66%;
}
.col-lg-12{
100%;
}
}
五、响应式图片
1.使用背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式图片</title>
<style>
.container{
margin:0 auto;
100%;
}
.banner {
padding-top:56%;/*占本身元素宽度的百分比*/
border:1px solid #ccc;
background:url("../images/banner01-small.jpg");
background-size:100% 100%;
}
@media (min-481px) {
.banner{
background:url("../images/banner01-middle.jpg");
}
}
@media(min-801px){
.banner{
background:url("../images/banner01.jpg");
}
}
@media(min-1200px){
.container{
1000px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>响应式图片</h1>
<div class="banner">
</div>
</div>
</body>
</html>
2.使用H5的picture标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式图片</title>
<style>
.container{
margin:0 auto;
100%;
}
.banner img{
100%;
}
@media(min-1200px){
.container{
1000px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>响应式图片</h1>
<div class="banner">
/*兼容性差，从上到下，如果满足第一个就不会执行下面的了
所以写断点时由大到小写，不兼容的时候，就会显示img*/
<picture>
<source srcset="../images/banner01.jpg" media="(min-801px)">
<source srcset="../images/banner01-middle.jpg" media="(min-481px)">
<source srcset="../images/banner01-small.jpg">
<img src="../images/banner01.jpg" alt="">
</picture>
</div>
</div>
</body>
</html>
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文件内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用插件 实现 响应式图片</title> <script src="picturefill.js"></script> </head> <body> <span data-picture data-alt="响应式图片"> <span data-src="../images/banner01-small.jpg"></span> <span data-src="../images/banner01-middle.jpg" data-media="(min-768px)"></span> <span data-src="../images/banner01.jpg" data-media="(min-992px)"></span> </span> </body> </html>
六、使用插件 实现 图片拖动
-
html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图 滑动插件</title> <link rel="stylesheet" href="swipe.css"> <script src="swipe.js"></script> <style> .swipe_wrap{ 100%; } </style> </head> <body> <div id="imglist" class="swipe"> <div class="swipe_wrap"> <div><img src="../images/banner01.jpg" alt="" /></div> <div><img src="../images/banner02.jpg" alt="" /></div> <div ><img src="../images/banner03.jpg" alt="" /></div> </div> <div class="imglist-contral"> <span class="left" onclick="mySwipe.prev()"><</span> <span class="right" onclick="mySwipe.next()">></span> </div> </div> <script> window.mySwipe = new Swipe(document.getElementById('imglist'), { startSlide: 2, speed: 400, auto: 3000, continuous: true, disableScroll: false, //stopPropagation: false, // callback: function(index, elem) {}, //transitionEnd: function(index, elem) {} }); </script> </body> </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