可以把這些樣式加到你的樣式文件中，或者單獨創建一個名為“responsive.css”文件，并在相應的條件中寫上你的樣式，讓他適合你的設計需求：
1.1024px顯屏
@media screen and (max-width : 1024px) {
/* 樣式寫在這里 */
}
2.800px顯屏
@media screen and (max-width : 800px) {
/* 樣式寫在這里 */
}
3.640px顯屏
@media screen and (max-width : 640px) {
/* 樣式寫在這*/
}
4.iPad橫板顯屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 樣式寫在這 */
}
5.iPad豎板顯屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 樣式寫在這 */
}
6.iPhone和Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 樣式寫在這 */
}
現在有關于這方面的運用也是相當的成熟，twitter的Bootstrap
第二版本中就加上了這方面的運用。大家可以對比一下：
@media (max-width: 480px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 980px) { ... }
@media (min-width: 1200px) { .. }
