|
响应式web设计的目的：可以使web页面能自动的对设备尺寸进行适配。
响应式web设计的主要方法：使用css的media来查询当前设备的状态，主要的是显示尺寸，然后对不同的尺寸的设备编写不同的css使得web在不同尺寸的情况下显示不同的页面布局，文字大小，图片尺寸等。
在尺寸设置的时候多使用百分比方式。
响应式web的优点：可以使web页面能自动的对设备尺寸进行适配，可以让不同尺寸设备浏览页面时候尽可能显示相同或者合适布局。
响应式web的缺点：响应式web尽可能多的对不同设备进行适配，但是不代表他对所有的设备都是最佳选择，如果想要让web在不同设备显示最佳效果还是需要针对具体设备定制开发。
响应式web设计这里要推荐一本书《响应式Web设计：HTML5和CSS3实战》，书里对响应式web设计有比较详细的说明。
下面举个例子简单说明一下响应式的原理
css.css
|
1
2
3
4
5 |
ul{list-style: none;}
ul li{float: left; padding-right: 100px;}
@media screen and (max-width:500px){
ul li{background-color: red;}
}
|
jsp页面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<%@page contentType="text/html" pageEncoding="GBK" %>
<link rel="stylesheet" href="css.css">
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
</ul>
| 在显示屏宽度为500px以上的时候ul列表显示横向的布局，而media中写了当显示屏宽度小于500px时ul列表纵向显示背景为红色
|
