如果你的块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器CSS body标签的样式如下01body 02* 加载背景图 *03backgroundimage urlimagesbackgroundphotojpg0405* 背景图垂直水平均居中 *；这种网页布局就是“自适应布局”有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化这种布局的特点是使用CSS媒体查询语句@media screen and ，能根据页面宽度，让页面布局。

css3的媒体查询功能，使得响应式布局得以实现，其实基本原理还是用css3媒体查询mediameta功能查出设备的尺寸，然后写出不同的尺寸写出或者覆盖css样式，使得界面看起来变换了接下来就和大家说一下怎么用CSS3媒体查询esp；传统的盒子模型对于那些特殊页面的布局非常的不方便，比如垂直居中，子元素排序的实现就很麻烦然而随着w3c提出了flex布局，可以简便完整响应式地实现各种页面布局，大大的简化了开发过程，并且Flex布局已经得到了所有的浏览器；2引入包含Media的CSS文件 一般情况HTMLCSS代码都是分开写的，Media也不例外 3写Media中的代码 以某个网页的响应式布局为例 结构@media设备类型and 设备特性｛样式代码｝ *媒体查询；如何通过CSS3 实现响应式Web设计 分为三个步骤1允许网页宽度自动调整首先在页面头部中，我们需要加入这样一行 viewport是网页默认的宽度和高度，网页的宽度默认就等于自己屏幕宽度width=devicewidth，并且原始。

对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单为了帮助你迅速的了解响应式设计，我起草了一篇快速教程你可以在3个步骤中学习到响应式设计和媒介查询Media Queries的基本原理假定你了解基本的CSS；用原生代码实现的根本在于媒体查询@media的设置mediascreen可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求2采用bootstrap框架布局 bootstrap框架布局完成的页面，是自动；2弹性盒模型布局flex 这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式3rem布局 rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配4响应式布局；说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么原理简单点说响应式布局它是通过CSS中Media Query媒介查询@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的。

今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一；屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸主要检测宽度，并设置不同的CSS样式，就可以实现响应式的布局我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容。

今天给大家带来一个用CSS3做出来的响应式布局的案列，需要的朋友可以拿去借鉴使用，响应式是CSS3的一个特色，我们熟练掌握后手机端和PC端都可以熟练的使用lt！DOCTYPE html *padding 0margin 0 html，body；注 Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD，下同设计 RWD采用 CSS 的 media query 技术 流体布局 fluid grids 自适应的图片视频等资源素材 为小中大屏幕做一些优化，目的是让任何；实现响应式的方式 Media Query早在CSS2的时候就出现，media screen and maxwidth1024px and minwidth300px divcolorred可以将Media Query看成“Meida Type判断条件 + CSS符合条件的样式规则。