响应式设计web（The response web）

       概述

1.关键特性：断点和媒体查询（具有跨浏览器的响应性和适配用户各种屏幕的能力）

 设置断点：

@media only screen and (min-width:600px){//这里声明一些css媒体查询的规则。
.container{
width:600px;                             //所有在此媒体查询花括号中的css规则都有更高的优先级
//断点设置在600 px(600是随意的)
}
}

2.强大易变的em

em是级联的，1em=16px；

 

一.流式布局

与传统的固定布局以像素单位为主不同，流式布局以百分比单位为主，这样便可以设计出更具有灵活性的布局方式。如：bootstrap 移动设备优先的流式栅格系统。

1.好处：

1）能够适配不同屏幕的大小的布局技术。

2）使网站具有更快的响应速度。

3）更简单的跨浏览器开发。

2.      在css中使用百分比的方式，可以使网站结构基于这样一个流式的模型。

         百分比能够让任何一个元素大小变得与其父元素相关。

          %布局：通过控制width：%； 来控制12等分。

3.利用百分比进行流式布局

4.box-sizing

   1）  box-sizing的初始值是content-box，这个模型实现了上面的方程式。

（       总宽度=   padding-left  +   border-left   +  width   +  padding-right  +  border-right ）

    2）   如果设置为box-sizing：border-box。

（ 总宽度=width ）

注：常用padding-bottom设置div的高度。

5.流式网格系统

1）桌面网格和移动端网格。有一点很重要，桌面中的列数能被移动端的网格数整除，这样行数包含一个偶数行列，保持着网格的结构。

二.媒体查询

媒体查询是与设备相关的技术，他可以让你查询到设备的各种属性值，如：设备类型，分辨率，屏幕物理尺寸及色彩等。从而决定应用不同的样式，给出求同异存的布局方案。

1.媒体类型：

数字屏幕的screen

打印页面的print

指定为所有类型的all

2.@media screen{        //以@media开始，接着声明媒体类型。在这个例子中 ，媒体类型是数字屏幕。

p{ font-family:sans-serif }  //在花括号之间是普通的css语句，例子中它只会对数字屏幕设备上的浏览器有效果。

}

@media handheld{        //以@media开始，接着声明媒体类型。在这个例子中 ，媒体类型是手持设备。

p{ font-family:sans-serif }  //在花括号之间是普通的css语句，例子中它只会对数字屏幕设备上的浏览器有效果。

}

3.媒体查询主要用于基于视口宽度——通常与浏览器窗口宽度一致——提供不同的css。

4.max-width：只会影响目标宽度及其之下的视口，而min-width将会影响指定宽度及其之上的所有视口。

以下的媒体查询将会在宽度为400像素或更小的视口上应用相应的css。

@media（max-width:400px）{...}

以下的媒体查询将会在宽度为400像素或更小的设备上应用相应的css。

@media（max-device-width:400px）{...}

5.foundation框架

特性：响应式网格系统

         包括silder和tab在内的导航元素

         表单和按钮

          用于modal pop-up和tooltip的jQuery插件。

<div class="row">       //声明一个区块（section）的行（row）
    <div class="two columns offset-by-five"> //类名上标明“two columns” 表示该元素所需要的空间
                                               offset表示偏移量
      <img src="http://placehold.it/300x200">
    </div>
    <div class="three columns offset-by-two">  // offset-by-two  两列之间添加一些空白区域
      <a class="small button">About</a> 
      <a class="small button">Blog</a> 
      <a class="small button">Contact</a> 
    </div>
  </div>

<div class="row">
    <div class="two columns offset-by-five">// 12列意味着填充整行，并确保接下来页面内边距的一致性。每一列的左侧和右侧都会有15像素的内边距。
      <img src="http://placehold.it/300x200">
    </div>
    <div class="three columns offset-by-two">  
      <a class="small button">About</a> 
      <a class="small button">Blog</a> 
      <a class="small button">Contact</a> 
    </div>
  </div>
<article class="row">
  <header class="twelve columns"> 
    <figure>
      <img src="http://placehold.it/980x400&text=Post+Image">
    </figure>
    <h1>Recent Post Title</h1>
  </header>
  <div class="twelve columns">
    <aside class="three columns">
      <div class="row"> 
        <div class="eleven columns panel"> //panel 类会使元素带上灰色背景。
          <h5>01/01/2012</h5>
          <p><span class="label">Tag</span>, <span class="label">Tag</span>, <span class="label">Tag</span> </p> 
        </div>
      </div>
    </aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</article>

<div class="row">
  <div class="three columns">
    <h5>Previous Post</h5>
    <h6>Post Title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    <a href="#">Read More</a>
    <p>
  </div>
  <div class="seven columns">
    <div class="row">
      <div class="nine columns">
      <h5>Contact</h5>
      <input type="text" placeholder="Name"> 
      <input type="text" placeholder="E-mail"> 
      <textarea placeholder="Message"></textarea> 
      </div>
      <div class="three columns">
        <h5>&nbsp;</h5> 
        <input type="button" value="Submit" class="large  button"> 
      </div>
    </div>
  </div>
</div>

 

 6.响应式网页的标签

container div标签。这个标签可以避免页面的流动性大，也会避免页面在断点之间产生不稳定的问题。

注：在div结束标签的之后有一个注释，标志这个div标签的结束。

7.创建页面元素

<div class="container">
    <header class="main">//header与页面等宽。
      <h1 id="logo">book-site.com</h1>
      <div class="social">
        <a class="icon twitter" href="javascript:void(0);">twitter</a>
//href="javascript:void(0);防止页面返回顶部。
        <a class="icon facebook" href="javascript:void(0);">facebook</a>
      </div>
    </header>
    <!-- end header.main -->
    <aside class="main">//页面导航
      <nav> //站点主要导航
        <a href="javascript:void(0);">books</a>
        <a href="javascript:void(0);">authors</a>
        <a href="javascript:void(0);">news</a>
        <a href="javascript:void(0);">blog</a>
      </nav>
      <div class="ads"> //放置广告的容器
        <figure class="ad">//figure具有语义的响应式图像容器。
          <img src="images/ad.jpg">
        </figure>
//  <figure class="ad"> <img src="images/ad.jpg">  </figure>   
//页面中的<img>是被一个<figure>包裹着的。这个<figure>会作为帮助响应式图片改变大小的容器。
        <figure class="ad">
          <img src="images/ad.jpg">
        </figure>
      </div>
      <!-- end .ads -->
    </aside>
    <section class="main">//页面主体内容
      <article>  //在article标签里会放置这个页面的文章内容。
        <header class="masthead"> //内容的报头。这里将会写下文章标题。
          <figure>
            <img src="images/masthead.jpg">
          </figure>
        </header>
        <!-- end header.masthead -->
        <h2>Headline</h2> //标题紧跟报头后面
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
</section>
<!-- end section.main -->
</div>
<!-- end .container -->

 

三.弹性图片

弹性的含义可表达为，图片可以根据当前的视窗自适应展示，图片的视觉表现力非常突出，因此弹性图片的布局与适配非常重要，这里所描述的图片包含了以图片为代表的图形或者媒体元素：图片，图标，图表及视频等。

1.可缩放的图像：

figure img{
width:100%;
max-width:1000px;//max-width将会防止图片超出设置的大小。通过这种方式图片在缩放的时候不会失真。
heightLauto;    //将使图片保持横纵比。
display:block;   //保证图片超出最大宽度1000px时保持居中。
margin:0 auto;

}

四.设备优先

断点是为了适应各种设备的宽度，技术上是基于媒体查询来判定当前设备的宽度，从而设计多套样式来满足不同设备的视觉展示需求。因此设计模式是基于设备的。（设备给服务器发送的信息包括用户代理，设备分辨率和窗口大小。）

五.移动优先

移动web设计90%是内容性设计，10%是装饰性设计。所以我们要根据内容的可读性，易读性来确定断点，从而无视设备。因此设计模式是基于内容的。

1.为小屏幕设计头部（off-canvas设计模式）

off-canvas导航可以让我们通过把元素隐藏在页面的左侧或者右侧，并在用户发出指令的时候，以侧滑出导航栏的方式优化用户体验。

在移动浏览器中，双击是一个保证用户能够浏览网站的高效方法。

字体：fonts.com

六.使用样式版表达设计

http://styletil.es

样式版及工作原理：http://alistapart.com/article/style-titles-and-how-they-work

七.响应式用户体验设计模式

1.一级导航

        一级导航是指不存在隐藏或次要导航，只有一个级别的导航

   toggle导航模式编码：

css：

  <style type="text/css">
    * {                 
        text-transform: uppercase; 
        font-family: Helvetica; 
        text-align: center;
    }
    header, nav, ul, li {             
        width:100%;
    }   
    ul {                  
        list-style: none; 
        margin:0; 
        padding:0; 
        float:left; 
    }
    li {                
        border-bottom: 1px solid #2e3034; 
        margin:0; 
        padding:20px 0; 
        float:left; 
    }

    .l-half {               
        width:50%; 
        float:left; 
        padding: 20px 0;
    }
    .grey {               
        background:#2e3034; 
        color:#fff;
    }
    .light-grey{                
        background:#e4e4e4; 
        color:#2e3034; 
        outline:1px solid #2e3034;
    }

    nav {               
        height:1px; 
        overflow: hidden; 
        width:100%; 
        outline:1px solid #2e3034; 
        -webkit-transition: height 1s;                          
    }
    nav.is-expanded {
        height:235px;                                     
    }

  @media(min-width:700px){
      #logo {
          width:200px;
      }
      #menu {
          display: none;
      }
      nav, nav.is-expanded {
          height:60px;
          width:500px; 
          float: right;
      }
      ul {
          width: 500px;
      }
      li{
          width:25%;
      }
      article {
          float:left;
      }
  }
  </style>

HTML： 

<header>
  <div id="logo" class="l-half grey">Logo</div>
  <div id="menu" class="l-half light-grey">Menu</div>             
</header>
<nav id="nav">                                                          
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Products</li>
    <li>Contact</li>
  </ul>
</nav>
<article>
  <h2>Headline</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</article>

jQuery：

<script type="text/javascript">
  $('#menu').click(function(){
    $('nav').toggleClass('is-expanded');
  });

  $('.has-subnav a').click(function(){
    $(this).parent().toggleClass('is-expanded');
    $('nav').toggleClass('is-subnav-expanded');
  });
</script>

多级toggle导航（jquer引入）：

css：

  <style type="text/css">
  *{
  text-transform: uppercase; 
  font-family: Helvetica; 
  text-align: center;
  }

  header, nav{width:100%;}

  ul{
    list-style: none; 
    margin:0; 
    padding:0; 
    float:left; 
    width:100%;
  }



  ul.subnav{
    height:0px;
    overflow:hidden;
  }

  li.is-expanded ul.subnav{
    height:236px;
  }

  ul.subnav li a{
    background:#e4e4e4;
  }

  li a{
    border-bottom: 1px solid #2e3034;
    margin:0;
    padding:20px 0;
    float:left;
    width:100%;
  }

  .l-half{
    width:50%; 
    float:left; 
    padding: 20px 0;
  }

  .grey{
     background:#2e3034; 
     color:#fff;
  }

  .light-grey{
    background:#e4e4e4; 
    color:#2e3034; 
    outline:1px solid #2e3034;
  }

  nav{
      height:1px; 
      overflow: hidden; 
      width:100%; 
      outline:1px solid #2e3034; 
      -webkit-transition: height 1s;
  } 
    
  nav.is-expanded{height:235px;} 
  nav.is-expanded.is-subnav-expanded{
    height:470px;
  }
  </style>

html：

<body>
<header>
  <div id="logo" class="l-half grey">Logo</div>
  <div id="menu" class="l-half light-grey">Menu</div>
</header>
<nav>
  <ul>
    <li class="has-subnav">
      <a href="#">Home</a>
      <ul class="subnav">
        <li><a href="#">sub-nav link</a></li>
        <li><a href="#">sub-nav link</a></li>
        <li><a href="#">sub-nav link</a></li>
        <li><a href="#">sub-nav link</a></li>
    </ul>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Products</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>
<article>
  <h2>Headline</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo libero, congue id arcu eu, sollicitudin tincidunt risus. Donec quis lorem eget nulla hendrerit laoreet adipiscing vel arcu. Nam ullamcorper mauris a sapien imperdiet, sit amet venenatis nisl rutrum. Aenean sit amet sapien ac diam pretium vehicula. Nulla nec suscipit felis. Phasellus volutpat nisl et massa egestas, a eleifend neque aliquam. Aenean in sagittis erat. In vulputate dolor varius est feugiat pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque malesuada scelerisque sem ac placerat. Maecenas vel purus condimentum, imperdiet tortor et, aliquet arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse varius ultricies ligula. Nulla diam ligula, varius eu purus eget, ornare posuere diam.
  </p>
</article>

js：

<script type="text/javascript">
  $('#menu').click(function(){
  $('nav').toggleClass('is-expanded');
});

$('.has-subnav a').click(function(){
  $(this).parent().toggleClass('is-expanded');
  $('nav').toggleClass('is-subnav-expanded');
});

</script>

八.用css在浏览器中增加图形

1.css基础

background-size：属性用于设置背景图片尺寸的显示规则。

语法：background-size：[x value] [y value];

单位可以是px或者百分比或  auto——在保持图像高度和宽度的比例基础上自动缩放图像。

                                             cover——缩放图像以适合铺满整个容器。

                                              contain——在不扭曲图像的前提下保证图像尽可能多得覆盖内容区域。

box-shadow：[x  distance]   [y  distance]  [blur]  [color]   x,y,blur的值可以用px为单位。