如何在css3中使用@media实现响应式布局

响应式布局，说白了就是一个网站可以兼容多种终端，可以根据不同的分辨率显示不同的状态。为了实现这一点，我们需要使用css3的媒体查询(Media query)。这个功能很强大，但是有利有弊。即兼容各种工作量大、效率低、加载时间长的设备。但是很好学。读完下面的代码，你会。

.page{

宽度:960px

高度:1000px

边距:0自动；

背景:# CCC

}

/*设备的最大宽度为960像素*/

@媒体屏幕和(最大宽度:960像素){

.页面{

宽度:100%；

背景:# 69F

}

}

/*宽度大于480像素小于768像素*/

@媒体屏幕和(最小宽度:480像素)和(最大宽度:768像素){

.页面{

宽度:100%；

背景:# F00

}

}

/*设备的最大宽度为480像素*/

@媒体屏幕和(最大宽度:480像素){

.页面{

宽度:100%；

背景:# 00FF00

}

}以便可以在不同的分辨率下采用不同的风格。

还有一点，如果是移动开发，一定要把下面的代码加到头里。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

求HTML指教，当浏览器窗口大小变化时，如何让内容布局不变？

简单点就是布局设置宽度的时候，用百分百设置。但这样还是很容易出问题（内容溢出，内容移位）。最好就是用响应式布局，专门针对各个分辨率进行设计css。