如何设计响应式布局？

说到响应式布局，就不得不提到CSS3中的Media Query(媒体查询)。是个好东西，好用，功能强大，速度快…媒体查询是做出回应式布局的利器。使用这个工具，我们可以非常方便快捷地制作出各种丰富实用的界面。让我们仔细看看媒体查询。

当浏览器的分辨率小于1024px时，通过媒体查询的预置样式表将页面的宽度设置为百分比显示，这样页面的结构元素就会根据浏览器的大小进行调整。同样，当浏览器的可视区域变化到一定值(比如说650px)时，页面的结构元素会根据媒体查询预设的级联样式表进行调整。看一下我们的例子:

/*当浏览器的可视区域小于980像素时*/

@媒体屏幕和(最大宽度:980像素){

# wrap {宽度:90%；边距:0自动；}

#内容{宽度:60%；填充:5%；}

#侧边栏{宽度:30%；}

#页脚{填充:8% 5%；边距-底部:10px} }

/*当浏览器的可视区域小于650像素时*/

@ media screen and(max-width:650 px){ # header { height:auto；}

# search form { position:absolute；top:5px；右:0；}

# content { width:auto；浮动:无；边距:20px 0；}

#侧边栏{宽度:100%；浮动:无；边距:0；} }

通过以上，我们可以监控浏览器可视区域的变化，我们的页面结构元素也会随之变化。当然，你可以多设置几个监控级联样式表，这样你就可以根据不同尺寸的设备做出响应式的布局。为了更好地显示，我们经常需要格式化一些CSS属性的初始值:

/*停用iPhone中Safari的自动字体大小调整*/

html {-WebKit-text-size-adjust:none；}

/*将HTML5元素设置为块*/

文章、旁白、详细信息、图片标题、图表、页脚、页眉、组、菜单、导航、部分{ display:block；}

/*设置图片和视频等自适应调整*/

img {最大宽度:100%；高度:自动；宽度:自动& # 92；9;/* ie8 */ }

.视频嵌入，。视频对象，。视频iframe {宽度:100%；高度:自动；}

最后要注意的是，在页面的顶部< head & gt& lt/head & gt；添加以下一句:

& ltmeta name = & quot视窗& quotcontent = & quot宽度=设备宽度；初始比例= 1.0 & quot& gt

Meta viewport该属性是在移动设备上设置原始大小显示和缩放的声明。

设置:

宽度–视窗的宽度

高度–视窗的高度

初始比例-初始比例

最小比例–允许用户缩放的最小比例。

最大比例–允许用户缩放的最大比例。

用户可缩放-用户是否可以手动缩放。

最后，对于IE浏览器不支持媒体查询的情况，我们可以使用媒体查询JavaScript来解决，只需在页面头部引用css3-mediaqueries.js即可。

响应式布局和自适应布局有什么样的区别？

响应式布局是为了适配不同的终端而生，移动端布局是针对于智能手机为主，也就是现在行内常说的H5站（m站）。简单说一下他们的不同之处：

1、适配的群体不同，响应式适配各种终端，而移端大部分为智能手机为主2、响应式布局能根据不同的终端设备实现不同的页面布局，而移动端布局大部分是单列布局3、响应式布局有可能造成冗余的代码较多（传统式响应式布局，仅依赖于媒体查询，控制不同的页面布局），移动端布局冗余代码较少，对针对性较强相同之处：

1、在智能手机上，响应式看到的页面效果能和移动端的一样效果（其他忽略，仅从效果上而言）

2、两者都要面对适配的问题（这也是较为蛋疼的问题）

jQuery+CSS3实现树叶飘落特效？

1、响应式布局：

2、鼠标滚动：常用 mousewheel 事件，滚动事件3、动画效果 ：可以选择css3的动画，或者js自己写动画综上所述：你需要通过 2的事件来控制1，不过1的样式中要加入动画样式（3）。大功告成chm里都是方式方法。也有现成效果

响应式web开发的特点？

响应式优点：

1).对用户友好响应式设计可以向用户提供友好的Web界面，因为它可以适应几乎所有设备的屏幕。现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这是基本的也是响应式实现的初衷。

2).移动频段(MobileSegment)在响应式网站的帮助下，你可以获得网站流量的全景图。你需要做的只是创建一个移动频段(的流量统计)，以获得与网站流量相关的所有必要信息。流量的状态在分析网站性能及采取必要措施提升性能方面十分有用。

3).积累分享响应式Web设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。

4).最佳化搜索引擎搜索引擎也在变得越来越聪明，它们足够智能可以完成移动网站和桌面网站的连接。

5).无重定向响应式Web设计最大的优点之一是，你不必在乎任何重定向，它包含无用户代理定向。所以当你很少负责解决重定向及定向用户时，这是一件很棒的事情。

6).更少维护开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。

缺点，简单列举以下几点：

1.页面加载的代码多了，导致文件增大，影响加载速度；

2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；

3.局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。

HTML网页布局方式有哪些？

浮动布局，定位布局以及响应式布局，这三种布局是最基本最常见的，此外比较特殊的是弹性布局，弹性布局相对使用较少，需要根据项目的具体情况而定。在网站开发当中，通常是需要结合多种布局去实现网页布局的。如果是在学习网页布局的相关知识，可以弄本 HTML5布局之路 ，来辅助自己的学习

解释响应式布局，怎么实现的？有几种方法实现？

1.原生代码实现。

在国内目前设计网页的时候，一般会分成PC端和移动端两套页面，但在一定的情况下，必须满足只设计一个页面的情况下，满足不同端口都能正常使用，

因此会用用到自适应的方法。

用原生代码实现的根本在于媒体查询@media的设置。

@media screen 可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。

2.采用bootstrap框架布局

bootstrap框架布局完成的页面，是自动对应的自适应效果。

但是在书写的时候，应该严格按照bootstrap的书写规范，才不会出现怪异性问题。

写法举例：

说明：最后的数字对应该p所占栅栏的列数。

col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。

col-sm-6 代表在平板上也显示p占当前行的一半。

col-xs-12 代表在手机端显示为当前行的百分之百填充。

3.还有其他方式，如JQuery和专门做响应式的JS文件，比如nicebox均能实现自适应效果，实现响应式布局。