DOCTYPE html *padding 0margin 0 html，bodywidth 100%height 100%backgroundurlimgbjjpg backgroundsize 100% 100% #navwidth 560pxheight40px margin 10px auto ul。

如果你的块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器CSS body标签的样式如下01body 02* 加载背景图 *03backgroundimage urlimagesbackgroundphotojpg0405* 背景图垂直水平均居中 *。

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

响应式布局概念响应式web布局是让用户通过不同尺寸的浏览器都可以获得良好视觉的一种方法是目前比较流行的一种布局方法 bootstrap响应式布局实现原理通过CSS3 Media Queries媒体设备查询，媒体查询是让页面内容。

接下来我们先大致罗列一下，这几种布局方法的如何施展的众所周知的 Bootstrap，它的栅栏布局即为媒体查询的代表，完全通过屏宽来判断元素是否换行和是否显示colxs2 width 50%@media minwidth 768px。

注 Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD，下同设计 RWD采用 CSS 的 media query 技术 流体布局 fluid grids 自适应的图片视频等资源素材 为小中大屏幕做一些优化，目的是让任何。

具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做另外需要提到的是，ie6ie8是不支持CSS3的Media Query的，因此对于ie6ie8我们需要特殊处理，就让他们保持默认样式，这。

在CSS上定义的网页布局都可以允许扩展到浏览器的宽度，Javascript和jQuery也会伴随此行为响应式设计基础知识断点是在CSS3媒体查询时创建条件边界，然后在特定设备类型的浏览器中将宽度触发到备用样式我们通常使用最大宽度断点为。

为什么CSS响应式布局不是主流 一div+css布局的好处 1符合W3C标准，程式码结构清晰明了，结构样式和行为分离，带来足够好的可维护性 2布局精准，网站版面布局修改简单 3加快了页面的载入速度最重要的。

传统的盒子模型对于那些特殊页面的布局非常的不方便，比如垂直居中，子元素排序的实现就很麻烦然而随着w3c提出了flex布局，可以简便完整响应式地实现各种页面布局，大大的简化了开发过程，并且Flex布局已经得到了所有的浏览器。

响应式网站是用目前最新的网页制作技术5来做的，他可以根据使用者所用客户端来自动识别是pc端还是移动端，从而给出最合适的显示方式只要你会5，就可以做响应式布局 如果不用5语言写，那就用普通的4来写，宽高用。

Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询针对不同的设备分别写不同的代码推荐学习Bootstrap视频教程。

这种网页布局就是“自适应布局”有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化这种布局的特点是使用CSS媒体查询语句@media screen and ，能根据页面宽度，让页面布局。

做响应式网站离不开CSS响应式布局查询代码写法，而在此之前，我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性如视口宽度屏幕比例设备方向横向或纵向。

响应式布局，说直白点就是一个网站能够兼容多个终端，可以按不同的分辨率显示不同的状态而实现这个就要用到css3的Media Queries媒介查询这个功能非常的强大，但是有优点的同时，缺点也是会存在的那就是兼容各种设备。

4CSS3+Js实现响应式导航条 今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query具体可以查看浅谈响应式布局这篇文章，这里就不。

2弹性盒模型布局flex 这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式3rem布局 rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配4响应式布局。