第一：正确理解响应式布局

响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端都做一个特定的版本。

打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。

在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。

第二：响应式设计基本步骤

1.布局及设置meta标签

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

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

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
// 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;}}

不理解 rem 的童鞋，在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)

第三：响应式设计注意事项

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

#head{width:100%;}
#content{width:50%;}

2.图片处理

图片处理的万能方法 → 图片液态化

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

#wrap img{max-width:100%;height:auto;
}
/** 如此设置后id为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真 **/

3.除了 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.1Meta标签定义

1.2使用Media Queries适配对应样式

2.响应式内容

2.1响应式图片

响应式布局必懂知识_五分钟教会你响应式布局相关推荐

怎样保存python源程序_五分钟教会你如何编写、保存与运行 Python 程序
第一步接下来我们将看见如何在 Python 中运行一个传统的"Hello World"程序.Python教程本章将会教你如何编写.保存与运行 Python 程序. 通过 Pyth ...
授之以鱼不如授之以渔！五分钟教会您手工查杀***！
授之以鱼不如授之以渔!五分钟教会您手工查杀***! 经常看到有人求助- 为什么我的主页被改了,死活改不回来呀? 这个进程是不是正常进程呀? 这个程序是什么程序呀?为什么死活杀不掉呢? ....... ...
五分钟学会python函数_五分钟带你搞懂python 迭代器与生成器
前言大家周末好,今天给大家带来的是Python当中生成器和迭代器的使用. 我当初第一次学到迭代器和生成器的时候,并没有太在意,只是觉得这是一种新的获取数据的方法.对于获取数据的方法而言,我们会一种就 ...
前缀表达式后缀表达式_五分钟小知识之什么是后缀表达式
点击蓝色"五分钟学算法"关注我哟加个"星标",一起学算法后缀表达式,又称逆波兰式,指的是不包含括号,运算符放在两个运算对象的后面,所有的计算按运算符出现的顺 ...
正则表达式里转义字符_五分钟搞定正则表达式，如果没搞定，再加两分钟
五分钟搞定正则表达式,如果没搞定,再加两分钟 [这是 ZY 第 18 篇原创文章] 文章概览一.正则表达式介绍正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简 ...
python contains类似函数_五步教会你用python爬虫神器PyQuery！（内含详细步骤和代码）...
前言: 今天为大家带来的内容,是五步教会你用python爬虫神器PyQuery!(内含详细步骤和代码),在这里还是要啰嗦下,为了有更好的观赏性,大部分代码用图片的方式呈现出来!喜欢的话不忘点赞关注不迷 ...
老滚5初始化python失败_五分钟学会怎么用python做一个简单的贪吃蛇
Pygame 是一组用来开发游戏软件的 Python 程序模块,基于 SDL 库的基础上开发.我们今天将利用它来制作一款大家基本都玩过的小游戏--贪吃蛇. 一.需要导入的包 import pygame ...
markdown 本地链接_五分钟快速入门Markdown
前言开篇第一问,什么是markdown?我为什么选择用它而不是用word? markdown是一种极为简洁的标记语言,使用markdown可以更集中于写作内容本身而不必过分纠结于格式排版问题,可以把 ...
c++ stack 遍历_五分钟C语言数据结构之二叉树后序遍历（非递归很重要）
五分钟C语言实现常见数据结构今天的内容分享的是二叉树后序遍历 DP问题,欢迎关注动态规划一篇就够了全网最详细, 逐步理解, 万字总结 - Johngo的文章 - 知乎 https://zhuan ...

响应式布局必懂知识_五分钟教会你响应式布局