0

当我们制作特定于 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： *在第一种方法中，最好也指定 Landscape，否则没有必要。*

将此与第一个方法代码进行比较

/* 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"链接还是没有必要？

4

2 回答 2

4

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

于 2011-07-27T07:53:07.663 回答
0

我自己更喜欢第一种方法，因为我喜欢把所有东西都放在一个地方。至于 的必要性style="text/css"，您不需要拥有它，至少对于 HTML5 doctype，但我认为它仍然是最佳实践。也是如此media="all"。

于 2011-07-27T15:37:18.517 回答