如何使用兩個CSS文件設置一個HTML文件的樣式？

Question

我必須創建兩個版本的Web應用程序：一個用於橫向，一個用於縱向。但我需要像我們通常在iPad上那樣運行這些;在縱向模式下，縱向版本應該可以工作，如果模式是橫向，那麼橫向版本。

如何製作一個HTML文件和兩個CSS文件的網站？

Answer 1

使用CSS3媒體查詢

/* iPads (landscape) */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

Answer 2

查找到響應式設計。 Twitter的Bootstrap項目包含一系列響應式佈局，但該方法非常基礎：您可以根據設備的當前寬度定義CSS。

http://twitter.github.com/bootstrap/scaffolding.html#responsive

下面是一篇文章，解釋CSS3和媒體查詢：http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Answer 3

這裏是css media queries的標準設備： -

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Answer 4

這人會幫助你

http://ajaxian.com/archives/iphone-windowonorientationchange-code

它檢測瀏覽器的方向更改並調用Java腳本函數。裏面的功能，你可以加載你的css類作爲你的首選:)