响应式布局总结

响应式布局的开发基础知识

本章主要分为如下几个部分

• 正确理解响应式设计
• 响应式设计的步骤
• 响应式设计须要注意的问题

• 响应式网页布局实现原理

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

  响应式网页设计就是一个网站可以兼容多个终端-而不是为每一个终端作一个特定的版本。打个比方来讲：如今社会有不少响应产品，例如折叠沙发，折叠床等等，当咱们须要把沙发放到一个角落的时候，此刻沙发就比如div吧，而角落里的某个地方就比如父元素，因为父元素空间的改变，咱们不得不调整div,让它可以依然放在角落里。在项目中你会遇到不一样的终端，因为终端分辨率不一样，因此你要想让用户体验更好，就必要让你的页面可以兼容多个终端。

  第二：响应式设计的步骤

  了解了什么是响应式，那么接下来咱们就要说说响应式设计的步骤，有人这时候会说“博主，你傻啊，响应式设计的步骤不就是1.编写非响应式代码、2.加工成响应式代码、3.响应式细节处理、4.完成响应式开发吗？”博主菊花一震 原来高手在民间啊，微微一硬表示敬重，我去 ，说错了 是微微一笑，你们不要误会啊。

言归正传，博主由于是刨根问底拦不组的，因此在此就往响应式设计的祖坟上刨，深刻了解下这四个步骤。

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){}

3.字体设置

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

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

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

rem

说明：

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

em

说明：

相对长度单位。相对于当前对象内文本的字体尺寸。

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)

4.响应式设计须要注意的问题

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.响应式图片