这种网页布局就是“自适应布局”有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化这种布局的特点是使用CSS媒体查询语句@media screen and ，能根据页面宽度，让页面布局；任何元素 element 都可以被浮动段落divlisttables，以及图像都可以被浮动，事实上即使是像 span 和 strong这样的行内置元素也可以很好地进行浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动。
css响应式布局的方法
1、响应式布局，说直白点就是一个网站能够兼容多个终端，可以按不同的分辨率显示不同的状态而实现这个就要用到css3的Media Queries媒介查询这个功能非常的强大，但是有优点的同时，缺点也是会存在的那就是兼容各种设备。
2、“JavaScript基础HTML入门基本内容，CSS+DIV的基础知识，选择器，盒子模型，网页布局，Photoshop，JavaScript高级编程，jQuery插件开发，模块化组件开，AJAX，HTML5，CSS3，响应式原理及布局，Bootstrap，前端依赖管理，CSS预处理语言Less+Sass，Grunt。
3、尽可能的适应各种分辨率响应式布局媒体查询+流式布局使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
4、说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么原理简单点说响应式布局它是通过CSS中Media Query媒介查询@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的。
5、今天给大家带来一个用CSS3做出来的响应式布局的案列，需要的朋友可以拿去借鉴使用，响应式是CSS3的一个特色，我们熟练掌握后手机端和PC端都可以熟练的使用lt！DOCTYPE html *padding 0margin 0 html，body。
css实现响应式布局原理
为什么CSS响应式布局不是主流 一div+css布局的好处 1符合W3C标准，代码结构清晰明了，结构样式和行为分离，带来足够好的可维护性 2布局精准，网站版面布局修改简单 3加快了页面的加载速度最重要的。
但是，响应式布局，难点并非是技术方面，而是设计 对于响应式布局的技术基础，只要你在MDN之类的网站上，把HTML5CSS3的特性吃透，基本上完全能满足开发响应式布局的工作 但是，技术过关了只是第一步，真正困难的是UED，如何设计站点如何。
css自适应宽度有2种方式1是通过百分比来控制宽度2可以通过块状元素自动占满父级的宽度的特性来实现 PS当然还有一些方法，比如css3的flexbox布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用。
