什麼是最好的方式來保持css獨立於iPad的人像和風景模式？

當我們製作iPad特定的網站時（我爲桌面用戶製作不同的網站），並且我們還想爲縱向和橫向模式編寫不同的CSS，您更喜歡哪種方法？什麼是最好的方式來保持css獨立於iPad的人像和風景模式？

第一種方法

我們可以保持一個CSS文件只有一個HTTP請求

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

和使用媒體查詢內保持代碼的單獨

/* CSS for landscape here */ 

#wrapper {width:1024px} 

/* CSS for portrait here */ 

@media only screen and (orientation:portrait){ 
#wrapper {width:768px} 
}

第二種方法

我們可以使用2個CSS文件2 http請求

<!--CSS for landscape--> 
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)"> 

<!--CSS for portrait--> 
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

哪種方法你願意和，如果您有什麼意見或建議，以改善請告知。

注：我正在做單獨的網站片，它不適合臺式機和移動

編輯2： * 在第一種方法是它更好地過指定橫向或者是沒有必要的。 *

比較這與第一種方法的代碼

/* CSS for landscape here */ 

@media only screen and (orientation:landscape){ 
#wrapper {width:1024} 
} 

/* CSS for portrait here */ 

@media only screen and (orientation:portrait){ 
#wrapper {width:768px} 
}

和它是確定從CSS鏈接刪除style="text/css"？

<link href="style.css" rel="stylesheet" media="all" />

我應該在鏈路持續media="all"或者它沒有必要？

來源

2011-07-27 Jitendra Vyas

我更喜歡第一個，因爲整個CSS在第一個請求上被緩存。隨着第二個，其他模式的CSS將需要下載，所以屏幕方向的變化將不會像第一個那樣平滑。

來源

2011-07-27 07:53:07

我正確使用第一種方法嗎？我們是否需要在@media only screen和（orientation：portrait）中保留CSS的CSS？我認爲如果我們沒有爲CSS指定這個並不重要。我認爲默認總是用於景觀。 –

我從來沒有開發過iPad，所以我不能真正回答你的評論。然而，我的回答對任何平臺都有效（Android也是如此）。 –

+1行。感謝您的建議。爲了緩存你是對的。 –

我更喜歡第一種方法，因爲我喜歡把所有東西放在一個地方。至於style="text/css"的必要性，您不需要擁有它，至少在HTML5文檔類型中，但我認爲它仍然是最佳實踐。 media="all"也是如此。

來源

2011-07-27 15:37:18

什麼是最好的方式來保持css獨立於iPad的人像和風景模式？

回答

相關問題