可以把這些樣式加到你的樣式文件中忆矛,或者單獨(dú)創(chuàng)建一個(gè)名為“responsive.css”文件趣苏,并在相應(yīng)的條件中寫上你的樣式,讓他適合你的設(shè)計(jì)需求:
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) {
/* 樣式寫在這 */
}
現(xiàn)在有關(guān)于這方面的運(yùn)用也是相當(dāng)?shù)某墒欤瑃witter的Bootstrap
第二版本中就加上了這方面的運(yùn)用瀑凝。大家可以對(duì)比一下:
@media (max-width: 480px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 980px) { ... }
@media (min-width: 1200px) { .. }