对于 iPad 的纵向和横向模式，保持 css 独立的首选方法是什么？

Question

当我们制作 iPad 专用网站（我正在为桌面用户制作不同的网站）并且我们还想为纵向和横向模式编写不同的 CSS 时，您会更喜欢哪种方法？

第一种方法

我们可以只用一个 http 请求来保留单个 CSS 文件

<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}
}

可以style="text/css"从 css 链接中删除吗？

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

我应该保持media="all"链接还是没有必要？

Answer 1

我更喜欢第一个，因为整个 CSS 都会在第一个请求时被缓存。对于第二种，需要下载另一种模式的 CSS，因此屏幕方向的变化不会像第一种那样平滑。