响应式网页设计

响应式网页设计(英语:Responsive web design,通常缩写为RWD),或称自适应网页设计、回应式网页设计、对应式网页设计。是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放、平移和滚动。——摘自维基百科

响应式网站的简单实现

1
2
3
4
5
<meta name="viewport" content="
width=device-width,
initial-scale=1.0,
user-scalable=no"
/>

上述代码是对viewport的设置,<meta>标签嵌套在<head>标签中。

width=device-width 属性是设置页面宽度为设备宽度。

initial-scale=1.0 属性是设置页面缩放比例为1.0,即正常大小。

user-scalable=no 属性是设置禁止用户手动缩放页面大小,因为响应式网站一般在不同设备都能正常显示网站内容,所以一般不需要用户手动缩放。

1
2
3
4
5
6
7
8
9
10
11
12
/*设备屏幕宽度大于所设的最小宽度时,使用该样式*/
@media screen and (min-width:){
/*CSS样式*/
}
/*设备屏幕宽度小于于所设的最大宽度时,使用该样式*/
@media screen and (max-width:){
/*CSS样式*/
}
/*设备屏幕宽度在所设宽度区间内时,使用该样式*/
@media screen and (min-width:) and (max-width:){
/*CSS样式*/
}

注:@media需写在CSS样式中,并且要放在一般显示样式之后,只有当一般显示样式不适配的时候才会匹配@media中的样式。