【问题标题】:Different CSS for different screen size?不同屏幕尺寸的不同CSS?
【发布时间】:2012-05-23 21:45:01
【问题描述】:

我在这里搜索了一下,发现可以使用以下方法之一:

Adapt.js 或媒体查询

我想知道什么更好用?我基本上需要为不同的屏幕调整一些具有不同宽度的指定 div 的大小。 (800x600 和 640x480)

如果没有提到是好的,还有其他解决方案吗?谢谢你:)

【问题讨论】:

标签: javascript css html media-queries


【解决方案1】:
<link rel="stylesheet" media="all" href="css/common.css">
<!--Responsive style sheets -->
<link rel="stylesheet" media="all and (min-width: 600px) and (max-width: 800px)" href="css/name1.css">
<link rel="stylesheet" media="all and (min-width: 480px) and (max-width: 640px)" href="css/name2.css">

【讨论】:

  • 效果很好,简单快速。谢谢;)
【解决方案2】:

你也许可以在 CSS 中使用类似的东西

@media only screen and (min-device-width: 768px) {
   ... put your css here
}

以上内容可能仅适用于移动设备

【讨论】:

  • 仅供参考:我将上述内容用于 iPod/iPad 界面。在 iPad 上显示分屏,在 iPod 上显示单屏
【解决方案3】:

如果您计划支持多个屏幕,我建议您使用 960 Grid http://960.gs/

【讨论】:

  • 我很乐意提供帮助。我正在使用它来构建 Ipad 和移动屏幕。它有一两天的学习曲线,但你会对生产力感到惊讶。祝你好运
  • 嗯,到目前为止,我对这些专栏内容一无所知:D!我想我会在空闲时间阅读它。谢谢大佬。
【解决方案4】:

媒体查询是您的最佳解决方案

have a detailed info about these here

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多