为不同的屏幕尺寸和移动设备编写不同的 css 文件

【问题标题】：Writing differnet css files for different screen sizes and mobile devices为不同的屏幕尺寸和移动设备编写不同的 css 文件
【发布时间】：2012-01-08 04:54:22
【问题描述】：

我整天都在想这个问题，但还没有解决：

我想要这 3 个 css 文件：

lowerThan960pxForDesktop.css（用于流畅布局）
MobileLandscape.css（iphone 960px android 800px 等）
MobilePortrait.css（iphone 640px android 480px 等）
我希望 Lanscape.css 使用 desktop.css
我希望 Portrait.css 将同时使用 desktop.css 和 Landscape.css

我的 HTML 应该是什么样子才能做到这一点 - 使用媒体查询或 javascript。我已经经历了很多时间，每次出现问题时（桌面获取 mobile.css 或 iphone 读取 Portrait.css，即使它处于横向模式等）。

【问题讨论】：

从这里开始：stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
我知道只瞄准手持设备，但是如何区分这两款 iphone 会很难（必须相同的操作系统、相同的浏览器等）
请记住 caniuse.com/#search=media%20queries（并不是说你应该为那些浏览器编程）

标签： html css media-queries responsive-design

【解决方案1】：

也许 Iphone 问题与已知的视口宽度问题有关？通过将其添加到 html 来解决。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

除了使用媒体查询来调用 css。并在 css 文件中调用 @import 来调用引用 css 文件（例如景观将 @import 桌面等）

媒体查询 101：

<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >

以及有关丰富的媒体查询世界的更多信息here。

还建议使用条件 IE cmets 来隐藏旧 IE 的媒体查询，让它只使用一种 css

编辑：啊，我现在明白了这个问题 - 你需要在不同的 Iphone 情况下使用不同的 css.. 你可以使用 jquery mobile 并根据从纵向到横向和返回的变化绑定一个 css 类更改。

希望对你有帮助

【讨论】：