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

步骤

1.布局及设置meta标签

当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，页面固定宽度大小，我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。

当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

//user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写

@media screen and (max-width:980px){

#head { … }

#content { … }

#footer { … }

}//这里面的样式会覆盖掉之前所定义的样式。

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图，我们可以这样设置：

/**ipad**/

@media only screen and (min-width:768px)and(max-width:1024px){

//兼容样式

}

/**iphone**/

@media only screen and (width:320px)and (width:768px){

//兼容样式

}

4.字体设置

到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。

rem是相对于根元素的，不要忘记重置根元素字体大小：

html{font-size:100%;}

//完成后，你可以定义响应式字体：

@media (min-width:640px){body{font-size:1rem;}}

@media (min-width:960px){body{font-size:1.2rem;}}

@media (min-width:1200px){body{font-size:1.5rem;}}

5.响应式设计需要注意的问题

1).宽度不固定，可以使用百分比

#head{width:100%;}

#content{width:50%;}

2).图片处理

在这里我给大家一把钥匙,有人会说，博主，能不能别装逼？图片处理还有啥钥匙，你以为是开门啊，博主，醒醒吧

哎哟 ，我这暴脾气，我说的钥匙不是真的钥匙，而是指图片处理的万能方法，是什么呢？就是图片液态化。接着 会有人问：“什么是图片液态化”呢？这个问题问的很好，给你打99分，多给你一分怕你骄傲，大家都知道水无形 能适合很多容器，那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢？

在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度，如：

#wrap img{

max-width:100%;

height:auto;

}

如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

#log a{display:block;

width:100%;

height:40px;

text-indent:55rem;

background-img:url(logo.png);

background-repeat:no-repeat;

background-size:100% 100%;

}

background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。

background-size:cover;// 等比扩展图片来填满元素

background-size:contain;// 等比缩小图片来适应元素的尺寸

最后我们来总结下响应式布局的实现原理

首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容(图片、多媒体)

1.响应式布局

(1).Meta标签定义

(2).使用Media Queries适配对应样式

2.响应式内容

(1).响应式图片

我知道各位还在期待什么，无图无真相，无dome不是瞎说吗，纸上谈兵，放心各位，博主不会这么讨打的下面就贡献出个人制作的响应式布局dome.

断点：

xs: 0

sm: 576px

md: 768px

lg: 992px

xl: 1200px