响应式开发

一：网页布局方式

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。

二：响应式布局

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

如上图所示，屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。
我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

一般我们会对常见的设备尺寸进行划分后，再分别确定为不同的尺寸的设备设计专门的布局方式，如下图所示

以上是我们对常见的尺寸进行分类后的结果，下图是与之对应的媒体查询条件。

三：响应式开发

1.什么是响应式开发

a) 在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端的设备的展示和阅读
b)之前，通常的做法是对移动端单独开发一套特定的版本
c)但是，如果移动终端设备起来越多的时候赋发成本太大，是因为需要做所有屏幕的适配
d)响应式开发的目的就是:一个网站能够兼容多种终端
e)在新建的网站上一般都会使用响应式开发
f)移动web开发和响应式开发是必须具备的技能
g)演示响应者页面

2.响应式开发和移动web开发的区别

3.响应式开发的原理：媒体查询

a)查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。
b)实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。

超小屏幕	（移动设备）	w<768px
小屏设备	768px-992px	768 <= w <992
中等屏幕	992px-1200px	992 =< w <1200
宽屏设备	1200px以上	w>=1200

4.媒体查询的基本实现方式：常用属性设置: http://www.runoob.com/cssref/css3-pr-mediaquery.html
a)CSS 语法

@media mediatype and|not|only (media feature) {
   
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

b)媒体类型

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

c)媒体功能

值	描述
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
max-height	定义输出设备中的页面最大可见区域高度。
max-width	定义输出设备中的页面最大可见区域宽度。
min-height	定义输出设备中的页面最小可见区域高度。
min-width	定义输出设备中的页面最小可见区域宽度。

d)简单案例说明：控制不同屏幕尺寸下的屏幕背景色

<style>
    .container{
     
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
     
        .container{
     
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
     
        .container{
     
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
     
        .container{
     
            width:970px;
            background-color: pink;
        }
    }
</style>

四：CSS框架

随着Web应用变的越来越复杂，在大量的开发过程中我们发现有许多功能模块非常相似，比如轮播图、分页、选项卡、导航栏等，开发中往往会把这些具有通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。

1.Bootstrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
来自 Twitter，粉丝众多，是目前最受欢迎的前端框架。

2.Amaze UI

Amaze ~ 妹子UI，国人开发，后起之秀！

3.Framework7

Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。

五：Bootstrap框架

1)Bootstrap框架ÿ