响应式布局的开发基础知识
本章主要分为以下几个部分
•正确理解响应式设计
•响应式设计的步骤
•响应式设计需要注意的问题
•响应式网页布局实现原理
第一：正确理解响应式布局
响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。
第二：响应式设计的步骤
了解了什么是响应式，那么接下来我们就要说说响应式设计的步骤，有人这时候会说“博主，你傻啊，响应式设计的步骤不就是1.编写非响应式代码、2.加工成响应式代码、3.响应式细节处理、4.完成响应式开发吗？”博主菊花一震 原来高手在民间啊，微微一硬表示敬重，我去 ，说错了 是微微一笑，大家不要误会啊。
言归正传，博主因为是刨根问底拦不组的，所以在此就往响应式设计的祖坟上刨，深入了解下这四个步骤。
1.布局及设置meta标签
当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，页面固定宽度大小，我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。
当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。
2.通过媒体查询来设置样式media query
media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写
3.设置多种视图宽度
假如我们要兼容ipad和iphone视图，我们可以这样设置：
3.字体设置
到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。
css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。
rem是相对于根元素的，不要忘记重置根元素字体大小：
4.响应式设计需要注意的问题
1.宽度不固定，可以使用百分比
2.图片处理
在这里我给大家一把钥匙,有人会说，博主，能不能别装逼？图片处理还有啥钥匙，你以为是开门啊，博主，醒醒吧
哎哟 ，我这暴脾气，我说的钥匙不是真的钥匙，而是指图片处理的万能方法，是什么呢？就是图片液态化。接着 会有人问：“什么是图片液态化”呢？这个问题问的很好，给你打99分，多给你一分怕你骄傲，大家都知道水无形 能适合很多容器，那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢？
在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度，如：
除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：
最后我们来总结下响应式布局的实现原理
首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）
我知道各位还在期待什么，无图无真相，无dome不是瞎说吗，纸上谈兵，放心各位，博主不会这么讨打的下面就贡献出个人制作的响应式布局dome.
好了 博主绞尽乳汁的成果就在这里了，下次我会总结下移动端的布局。
以上这篇响应式布局总结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
原文地址：http://www.cnblogs.com/dreamsboy/archive/2016/07/09/5656009.html
