java web 基础框架搭建_html5响应式布局基础框架搭建入门

html5响应式布局现今是非常流行的，但是很多人连html5响应式布局的框架都不会搭建，也不知道从何下手，所以本套教程将简单带大家进入响应式布局的大门，先来了解html5响应式布局的历史吧！

响应式布局来源

响应式布局是在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端设备，而不是为每个终端做一个特定的版本。这个概念是为移动互联网而诞生的，其目的就是为用户提供更加舒适的界面以及更好的体验。

响应式布局的优缺点

优点：

面对不同分辨率设备灵活性强

能够快速解决多设备显示适应问题

缺点：

兼容各种设备效率低下，并且工作量较大

代码累赘，会出现隐藏无用的元素，浏览器加载时间变长

HTML5响应式布局入门

响应式布局无非就是当设备屏幕分辨率大于多少的时候，定义一套CSS样式；当设备屏幕分辨率小于多少的时候，定义另外一套CSS样式，下面的案例是：当屏幕分辨率大于640px的时候，网页背景显示黄色，当小于640px的时候，网页背景显示红色。

代码如下：

假如有一个外部CSS文件，文件名为style.css，内部css代码如下：*{

margin: 0px;

padding: 0px;

}

body{

background-color: red; //背景色为红色

}

添加一个index.html文件，代码如下：html>

@media screen and (min-width:640px){

body{

background-color: yellow; //背景色为黄色

}

.....其它css

}

代码分析：

外部CSS文件引入的时候添加了一个media="only screen and (max-width:640px)属性内容，表示的是这个style.css里面的样式起作用的最大设备分辨率为640px，如果小于640px，则网页背景色会变成红色。如果超过了640px，这个css文件里面定义的样式将不会起作用，也就是网页的背景色不会变成红色。

index.html里面的@media screen and (min-width:640px)表示的是起作用的最小设备宽度为640px，如果小于640px，网页背景色就不会变成黄色。只有设备屏幕大于640px的时候，里面的css样式才会起作用，也就是网页背景色变成了黄色。

提示：

自己根据上方的代码做一个html5响应式布局小案例吧！只有尝试了才会体会到响应式布局的快感！

来源网站：太平洋学习网，转载请注明出处：http://www.tpyyes.com/a/html5/965.html