1流体布局，使用百分比和像素作为单位，使布局更加灵活布局设计有多种实现方式，可分为固定布局可切换固定布局灵活布局和混合布局四种其次，可切换固定布局的实现成本最低，但扩展性差而柔性布局和混合布局是响应式。

原理简单点说响应式布局它是通过CSS中Media Query媒介查询@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

脚手架全局样式，响应式的12列栅格布局系统记住Bootstrap在默认情况下并不包括响应式布局的功能因此，如果你的设计需要实现响应式布局，那么你需要手动开启这项功能基础CSS包括基础的HTML页面要素，比如表格table。

如何用css实现响应式全屏布局呢满屏大图是当前比较流行的一种网页形式，本文将使用css的backgroundsize属性，教您如何简单实现该效果核心概念使用backgroundsize 属性，填充整个viewport当css属性backgroundsize 值为cover时。

是目前比较流行的一种布局方法 bootstrap响应式布局实现原理通过CSS3 Media Queries媒体设备查询，媒体查询是让页面内容在不同的媒体环境下运行时可以展示不同的样式这个样式当然是由我们来书写规定的@media。

第二步HTML结构 在这个例子里，我有一个包括头部内容侧边栏和页脚的基本页面布局头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素第三步媒介查询Media Queries CSS3 Media Query媒介查询是响应。

如何用CSS做响应式布局呢1在HTML头部添加以下代码，用来显示兼容移动设备的显示效果 参数详解width=devicewidth 宽度等于当前设备的宽度 initialscale=1 初始的缩放比例默认为1minimumscale=1 允许用户缩。

也就是一半colsm6 代表在平板上也显示div占当前行的一半colxs12 代表在手机端显示为当前行的百分之百填充3还有其他方式，如JQuery和专门做响应式的JS文件，比如nicebox均能实现自适应效果，实现响应式布局。

如何在css3中使用@media实现响应式布局 响应式布局，说白了就是一个网站可以兼容多种终端，可以根据不同的分辨率显示不同的状态为了实现这一点，我们需要使用css3的媒体查询Mediaquery这个功能很强大，但是有利有弊。

实现原理代码thead floatleft tbody displayblockwidthautooverfloauto二响应式内容1响应式图片带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图文件体积。

实现响应式的方式 Media Query早在CSS2的时候就出现，media screen and maxwidth1024px and minwidth300px divcolorred可以将Media Query看成“Meida Type判断条件 + CSS符合条件的样式规则。

那在我们的实际专案中应该怎么去设计呢？在以往我们设计网站的时候都会受到不同浏览器的相容性的困扰，现在还要来个不同尺寸装置，我们该怎么淡定下来呢？有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的。

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

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

css自适应宽度有2种方式1是通过百分比来控制宽度2可以通过块状元素自动占满父级的宽度的特性来实现 PS当然还有一些方法，比如css3的flexbox布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用。

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